Bootstrap 4 - 流体高度布局

Question

我有一个使用 Bootstrap 4 的网站。我正在尝试创建一个占据整个屏幕高度的布局。我认为 Bootstrap 4 中新的“flex”网格方法应该支持这一点。也许我做错了？此时，我的应用程序的高度仅填充内容所需的高度。此时，如此Bootply所示，可用区域的整个高度未填充。我的代码如下所示：

<div class="container-fluid">
  <div class="row" style="border-bottom:1px solid #000;">
    <div class="col-12">
      <ul class="list-inline">
        <li class="list-inline-item"><i class="fa fa-star"></i></li>
        <li class="list-inline-item"><h2>My Name</h2></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-3">
      <div class="row">
        <div class="col-3" style="background-color:#fff;">
          <div class="text-center">
            <i class="fa fa-users"></i>
            <div>Users</div>
          </div>

          <div class="text-center" style="color:orange;">
            <i class="fa fa-files-o"></i>
            <div>Files</div>
          </div>

          <div class="text-center">
            <i class="fa fa-cubes"></i>
            <div>Containers</div>
          </div>

          <hr>

          <div class="text-center">
            <i class="fa fa-comments"></i>
            <div>Feedback</div>
          </div>      

          <div class="text-center">
            <i class="fa fa-question-circle"></i>
            <div>Help</div>
          </div>
        </div>

        <div class="col-9" style="background-color:#eee;">
          <div>item 1</div>
          <div>item 2</div>
          <div>item 3</div>
        </div>
      </div>
    </div>    

    <div class="col-9" style="background-color:#ddd;">
      [main content goes here]
    </div>
  </div>
</div>

如何在利用 Bootstrap 4 中的 flex 网格的同时使用屏幕的整个高度？

谢谢！

Answer 1

我认为 Bootstrap 4 中新的“flex”网格方法应该支持这一点。

确实如此，这是一个开始，我们首先需要给容器一个高度，所以我添加了这个规则：

.container-fluid {
  height: 100vh;
}

然后我将这些类添加d-flex flex-column到<div class="container-fluid">元素中，使它们成为列项，这样我们就可以使用flex-grow来拉伸它们，使它们填充父元素的高度。

最后，添加col到第二个/最后一个<div class="row">元素，然后，它得到flex-grow: 1, 以填充剩下的空间。

第二个/最后一个row也有一个内部row，有一个col-3元素，它也需要设置类似的，虽然我不知道这些应该如何包装等等，我把它们留给你自己设置。当你这样做时，一个很好的提示是为祖先/兄弟姐妹提供不同的背景颜色或边框，你会看到他们的行为。

更新引导

堆栈片段

.container-fluid {
  height: 100vh;
}

.container-fluid {
  height: 100vh;
}