it-swarm.com.ru

Колонна фиксированной ширины с контейнером-флюидом

Я пытаюсь найти решение, чтобы иметь боковой столбец слева с фиксированной шириной, а затем справа нормальный Bootstrap container-fluid.

Даже если боковая панель не находится внутри структуры Bootstrap, все в порядке. Я имею в виду, что это не должно быть с классом col-xx-xx.

Что бы я ни делал, главная проблема в том, что мне не удается заставить контейнер для жидкости оставаться рядом с боковой панелью.

Дело также в том, что если я не отображаю ни одной боковой панели, контейнер для жидкости должен использовать всю ширину страницы.

17
somtam

Макет fixed-fluid возможен в возможен в Bootstrap 3 , но теперь, когда Bootstrap 4 является flexbox, этот макет стал намного проще. Вам просто нужно включить flexbox и сделать несколько простых настроек, чтобы установить ширину вашего фиксированного бокового столбца flex: 0 0 300px;, а затем flex: 1; в вашем основном столбце, чтобы заполнить оставшуюся ширину ...

Bootstrap 4 Alpha 2http://codeply.com/go/eAYKvDkiGw

Вот более простое обновление для последней Bootstrap 4, которая по умолчанию является flexbox:

Bootstrap 4 Alpha 6 или Betahttp://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

Также см .: Как построить 2-колоночный (фиксированный - жидкий) макет с помощью Twitter Bootstrap?

Обновить 2018Пример начальной загрузки 4.0.0

20
Zim

Попробуйте включить свой container-fluid в div с margin-left: 200px (где 200px - ширина вашей боковой панели).

Затем расположите боковую панель, например, с помощью position: absolute

0
kartsims