如何使用 Bootstrap 4 制作流畅的布局答案

【问题标题】：How to make fluid layout using Bootstrap4如何使用 Bootstrap 4 制作流畅的布局
【发布时间】：2017-01-11 09:25:06
【问题描述】：

我今天切换到 bootstrap4。我在_variables.scss 中启用了 flexbox，但我对 bootstrap4 的 flexbox 功能到底是什么感到困惑。例如

我怎样才能使flex-direction:column？
是否可以有一个具有流体宽度的列？ flex-grow?

我有这个标记来构建一个全高的侧边栏布局

<div class="flex-col">

 <div class="flex-row" id="topnav">
  <div class="flex"> <!-- this will grow -->
    Brand
  </div>

  <div> left navbar</div>
 </div>

 <div class=" flex flex-row"> <!--flex expand to fill full height -->
  <div class="sidebar">Sidebar</div>
  <div class="flex">Content</div> <!--take rest of row space-->
 </div>
</div>

如何使用 bootstrap flexbox 实现这一点？

【问题讨论】：

这怎么太宽泛了？我要求特定的演示代码作为引导框架使用的示例。

标签： css twitter-bootstrap flexbox twitter-bootstrap-4 bootstrap-4

【解决方案1】：

阅读文档：http://v4-alpha.getbootstrap.com/layout/flexbox-grid/

你只需要启用 flexbox，row、col-* 使用 flexbox。 BS3使用flex-wrap和flex-direction:row，而不是flex-direction:column新的auto-layout columns使用flex-grow连续消耗剩余空间。

<div class="row">
       <div class="col-xs-4">
            4
       </div>
       <div class="col-xs-3">
            3
       </div>
       <div class="col-xs">
           grow
       </div>
</div>

演示：http://www.codeply.com/go/rZNj0SSRmi

更新

在 Bootstrap 4 alpha 6 中，flexbox 现在是默认设置，因此不再需要启用它。还有新的flexbox utilities 用于各种属性，如flex-column、justify-content-、align-items- 等。自动布局列仍可用于“增长”宽度或高度。

<div class="container-fluid">
    <div class="row">
        <div class="col-3 sidebar">Sidebar</div>
        <div class="col">Content</div>
    </div>
</div>

Bootstrap 4 A6 example fluid layout

【讨论】：