如何使用Bootstrap 4 Flexbox网格突破12列网格?

问题描述

当我听到引导程序4将在网格系统中使用flexbox时，我感到非常兴奋.我认为这将部署flexbox众所周知的快速而有用的元素大小调整.但是，似乎它只是向当前的12列网格系统添加了一些(主要)功能.

Bootstrap 4是否可以更轻松地在非12列布局中关联列宽?

就像弹性框如何相互关联，只需通过使用flex-grow，flex-shrink和flex-basis之类的flex-item属性指定要划分的水平空间即可.

Like how flex boxes can be related to each other simply by specifying the horizontal space to divide using flex-item properties like flex-grow, flex-shrink and flex-basis.

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

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

这可以通过对col2项目使用简单的flex:3;来完成.但是在bootstrap 4中似乎还是不可能的吗?也许我想念什么?

This would be done with a simple flex:3; on the col2 item. But still seems impossible in bootstrap 4? Maybe I'm missing something?

推荐答案

Bootstrap 4具有flexbox，它仍然基于12个单元的网格，但是还有一个新的 自动布局网格 ，它允许任何列数...

Bootstrap 4 has flexbox, and it's still based on a 12-unit grid, however there is also a new auto-layout grid which allows for any number of columns...

自动版式列: http://codeply.com/go/JbGGN4Ok3A

此外，您还可以使用 SASS 使用$grid-columns变量来更改网格列数.在您的示例中，可以使用10个单位的网格.将此与自动布局结合起来，您可以获得:

Also, using SASS, you can change the number of grid columns using the $grid-columns variable. In your example, a 10-unit grid would work. Combine this with auto-layout and you can get:

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

[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变量来更改列之间的间距.

Note: You can also use the $grid-gutter-width variable to change the spacing between columns.

UPDATE

UPDATE

引导程序4.0.0 : https://www.codeply.com/go/6jTDGBnPIO

自 Bootstrap 4 (alpha 6)开始，自动布局.col现在用于弹性增长，因此您可以创建半单元列布局. 2.5--7--2.5布局在数学上非常接近您的1.5--3.5--1.5(10单位)，因此这可能是替代自定义SASS 10单位网格的另一种选择. http://www.codeply.com/go/kBqRVNPE6E

As of Bootstrap 4 (alpha 6) the auto-layout .col is now used for flex-grow so that you can create half-unit column layouts. The 2.5--7--2.5 layout is mathematically very close to your 1.5--3.5--1.5 (10-unit) so this may be another option instead of the custom SASS 10 unit grid.http://www.codeply.com/go/kBqRVNPE6E

这篇关于如何使用Bootstrap 4 Flexbox网格突破12列网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！