如何通過引導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網格？

回答

相關問題