Как вырваться из сетки из 12 колонок с сеткой бутстрапа 4 flexbox?

Question

Когда я услышал, что bootstrap 4 собирался использовать flexbox для сетки, я был очень взволнован. Я думал, что это будет развертывать быстрый и полезный размер элемента, который известен для flexbox. Однако кажется, что он просто добавляет некоторые (основные) функциональные возможности в текущую 12-ти севую систему.

Помогает ли Bootstrap 4 связать ширину столбцов в макете не более 12 см?

Как, как прогибается коробки могут быть связаны друг с другом, просто указав горизонтальное пространство, чтобы разделить с использованием свойств Flex-элементов, таких как flex-grow, flex-shrink и flex-basis.

[1: 5] [----- 3: 5 -----] [1: 5]

Это будет сделано с помощью простого flex:3; на col2 пункта. Но все же кажется невозможным в bootstrap 4? Может, я что-то упустил?

Answer 1

Bootstrap 4 имеет flexbox, и он по-прежнему основан на сетке с 12 ячейками. flex-basis и flex-grow используются новым auto-layout columns, которые позволяют столбцы потреблять в оставшееся пространство вокруг определенных единиц столбцов ...

Авто-макет столбцов: http://codeply.com/go/JbGGN4Ok3A

Использование SASS, вы можете изменить количество столбцов сетки с использованием переменной $grid-columns. В вашем примере будет работать сетка с 10 единицами. В сочетании с автоматической компоновки, и вы можете получить:

[1: 5] [----- 3: 5 -----] [1: 5]

SASS

$enable-flex:true; 
    $grid-columns: 10; 
    $grid-gutter-width: 15px; 

HTML

<div class="row"> 
     <div class="col-xs"> 
       1:5 
     </div> 
     <div class="col-xs-6"> 
       3:5 
     </div> 
     <div class="col-xs"> 
       1:5 
     </div> 
</div> 

http://codeply.com/view/WG1jllYC2K

Примечание. Вы также можете использовать переменную $grid-gutter-width для изменения расстояния между столбцами.

UPDATE

По Bootstrap 4 (альфа-6) автоматическое расположение .col теперь используется для гибкого вырастали, так что вы можете создать половинной блок раскладки столбцов. Макет 2.5--7--2.5 математически очень близок к вашему 1.5--3.5--1.5 (10-единица), так что это может быть другой вариант вместо настраиваемой сетки SASS 10.