Столбец с фиксированной шириной с жидким контейнером в бутстрапе

Question

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

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

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

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

Спасибо за поддержку.

Answer 1

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

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

Answer 2

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

Bootstrap 4 альфа 2 http://codeply.com/go/eAYKvDkiGw

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

Bootstrap 4 Альфа 6 или бета- http://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> 

Также смотрите: How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

Update 2018 Bootstrap 4.0.0 example