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

Question

当我听说 bootstrap 4 将在网格系统中使用 flexbox 时，我真的很兴奋。我认为这将部署以 flexbox 闻名的快速且有用的元素大小调整。然而，它似乎只是为当前的 12 列网格系统添加了一些（主要）功能。

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

就像弹性盒子如何简单地通过指定水平 space 来相互关联一样，使用弹性项目属性 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 允许 any列数...

自动布局列： 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 以便您可以创建 half-unit 列布局。 2.5--7--2.5 布局在数学上非常接近您的 1.5--3.5--1.5（10 单位），因此这可能是另一种选择，而不是自定义的 SASS 10 单位网格。 http://www.codeply.com/go/kBqRVNPE6E

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

How to break out of 12 col grid with bootstrap 4 flexbox grid?

css

flexbox

twitter-bootstrap

bootstrap-4