Question

我今天要切换到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实现这一目标？

Answer 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现在是默认设置，因此不再需要启用它。对于flex-column，justify-content-，align-items-等各种属性，还有新的flexbox utilities。自动布局列仍可用于“增长”宽度或高度。

<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

如何使用Bootstrap4进行流体布局

1 个答案: