Как указать произвольную ширину для столбца - используя Bootstrap 4 - PullRequest
Новая
       30

Как указать произвольную ширину для столбца - используя Bootstrap 4

0 голосов
/ 10 октября 2019

Я пытаюсь конвертировать существующий сайт (и сделать его адаптивным) с помощью BootStrap (4.3.1) - и изучать Bootstrap, когда я прохожу его.

  • У меня top-Nav
  • , затем средняя часть, содержащая:
    • боковую панель (слева) и
    • содержимое страницы справа
  • затем внизу нижний колонтитул

@ Lucas Arbex помог мне правильно понять структуру начальной загрузки ( Проблема начальной загрузки с расположением левой боковой панели и содержимым страницы ), но теперь мне нужнонемного расширить col-1.
Я нашел различные способы в документации Bootstrap и некоторые в StackOverFlow (не обязательно v4), но пока все, что я пробовал:

  • a) складывает Контент, под боковой панелью,
  • b) не имеет боковой панели "полная высота (h-100)"

Вот код: 

<div id="homePage" class="container">
    <header class="row">
        <nav class="col navbar sticky-top navbar-light bg-light">
            <a class="navbar-brand" href="#">Sticky top</a>
        </nav>
    </header>
    <div class="row">
        <div class="col-1" style="background-color:yellow;">
            Sidebar
        </div>
        <!-- Righthand side content -->
        <div class="col-11" style="background-color:green;">
            MAIN PAGE CONTENT
            <p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
        </div>
    </div>
    <footer class="row">
        <nav class="col navbar sticky-top navbar-light bg-light" color="blue">
            <a class="navbar-brand" href="#">Footer at bottom of page</a>
        </nav>
    </footer>
</div>

Установка встроенной ширины - не похоже на работу. Лучшее, что я нашел: 

<style>
/* widen col-1 a bit */
.col-md-1plus {
  @include make-col-ready(); 

  @include media-breakpoint-up(md) {
    @include make-col(1.5);
  }
}
.col-md-10plus {
  @include make-col-ready(); 

  @include media-breakpoint-up(md) {
    @include make-col(10.5);
  }
}
</style>

Что я думаю для моих целей должно быть: 

<style>
/* widen col-1 a bit */
.col-md-1plus {
  @include make-col-ready(1.5);   /* << set it here as well */

  @include media-breakpoint-up(md) {
    @include make-col(1.5);
  }
}
.col-md-10plus {
  @include make-col-ready(10.5); /* << set it here as well */

  @include media-breakpoint-up(md) {
    @include make-col(10.5);
  }
}
</style>

Но заставляет столбцы складываться!

Просто установка 1-го столбцадо col-1plus, а оставление другого как col дает более близкие результаты.

Я попытался установить 1-й столбец на col-auto (и 2-й на col-11), думая / надеясь! что изображение размером 99px-120px (которое требуется на боковой панели) будет расширять столбец, но без движения: (

Для информации: боковая панель должна иметь ширину ~ = 120px на широких экранах и (в конце концов)Я, вероятно, попробую это как slide-in-from-left элемент на маленьких экранах.
Любая помощь, высоко ценится.

...