Question

当我听说bootstrap 4将为网格系统使用flexbox时，我真的很兴奋。我认为这将部署Flexbox众所周知的快速且有用的元素大小。但是，它似乎只是为当前的12 col网格系统添加了一些（主要）功能。

Bootstrap 4是否可以更容易地在非12列布局中关联列宽？

就像弹性框如何相互关联一样，只需使用flex-grow，flex-shrink和flex-basis这样的弹性项属性指定要划分的水平空间。

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

这将通过col2项目上的简单flex:3;来完成。但在bootstrap 4中似乎仍然不可能？也许我错过了什么？

Answer 1

Bootstrap 4有flexbox，它仍然基于12个单元的网格，但是还有一个新的auto-layout grid允许任何列数......

自动布局列 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变量更改列之间的间距。

<强> 更新

Bootstrap 4.0.0 ：https://www.codeply.com/go/6jTDGBnPIO

从 Bootstrap 4 （alpha 6）开始，自动布局.col现在用于flex-grow，以便您可以创建半单元列布局。 2.5--7--2.5布局在数学上非常接近1.5--3.5--1.5（10个单位），因此这可能是另一个选项，而不是自定义SASS 10单位网格。 http://www.codeply.com/go/kBqRVNPE6E

如何使用bootstrap 4 flexbox grid打破12 col网格？

1 个答案: