如何通过引导4 flexbox网格突破12 col网格？

当我听说引导程序4将采用flexbox作为网格系统时，我非常兴奋。我认为这将部署快速有用的元素大小，flexbox是众所周知的。然而，它似乎只是增加了一些（主要）功能到当前的12个网格系统。如何通过引导4 flexbox网格突破12 col网格？

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

怎么样柔性盒可以简单地通过指定水平空间使用像flex-grow，flex-shrink和flex-basis柔性项属性来划分被彼此相关。

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

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

来源

2016-08-05 systemaddict

也许使用Sass Mixins来修改网格类将是这个[高级网格技巧页面]（http://willschenk.com/bootstrap-advanced-grid-tricks/）上的最佳解决方案，但它会看起来这将是自然从flexbox拉动！ =（ – systemaddict

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

自举4（阿尔法6）自动布局.col现在用于柔性成长，这样就可以创建半单元列布局。 2.5--7--2.5布局在数学上非常接近您的1.5--3.5--1.5（10个单位），因此这可能是另一个选项，而不是自定义的SASS 10单位网格。 http://www.codeply.com/go/kBqRVNPE6E

来源

2016-08-08 11:33:01 ZimSystem

如何通过引导4 flexbox网格突破12 col网格？

回答

相关问题