Как сделать компоновку жидкости с помощью Bootstrap4

Question

Я перехожу на bootstrap4 сегодня. Я включил flexbox в _variables.scss, но я смущен тем, что именно является возможностями flexbox bootstrap4. Например

1. Как я могу сделать flex-direction:column?
2. Возможно ли иметь колонку с шириной жидкости? flex-grow?

У меня есть эта разметка для построения полной высоты боковой панели макета

<div class="flex-col"> 

<div class="flex-row" id="topnav"> 
    <div class="flex"> <!-- this will grow --> 
    Brand 
    </div> 

    <div> left navbar</div> 
</div> 

<div class=" flex flex-row"> <!--flex expand to fill full height --> 
    <div class="sidebar">Sidebar</div> 
    <div class="flex">Content</div> <!--take rest of row space--> 
</div> 
</div> 

Как я могу добиться этого с начальной загрузкой Flexbox?

Answer 1

Прочитайте документацию по адресу: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/

Вам просто нужно включить Flexbox, а также использование Flexbox row, col-*. BS3 использует flex-wrap и flex-direction:row, а не flex-direction:column. Используйте новый flex-grow для использования оставшегося пространства в строке.

<div class="row"> 
     <div class="col-xs-4"> 
      4 
     </div> 
     <div class="col-xs-3"> 
      3 
     </div> 
     <div class="col-xs"> 
      grow 
     </div> 
</div> 

Демо: http://www.codeply.com/go/rZNj0SSRmi

Update

В Bootstrap 4 альфа 6, Flexbox не теперь по умолчанию, поэтому он больше не должен быть включен. Есть также новый flexbox utilities для различных свойств, таких как flex-column, justify-content-, align-items- и т.д .. Столбцы автоматической компоновки могут еще быть использованы для «ширина grow` или высота.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-3 sidebar">Sidebar</div> 
     <div class="col">Content</div> 
    </div> 
</div> 

Bootstrap 4 A6 example fluid layout