html - 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

I thought the new "flex" grid approach in Bootstrap 4 was supposed to support this.

是的，这是一个开始，我们首先需要给容器一个高度，所以我添加了这条规则:

.container-fluid {
  height: 100vh;
}

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

最后，添加了 col到第二个/最后一个<div class="row">元素，并由此得到 flex-grow: 1 , 以填充剩余空间。

第二个/最后一个 row还有一个内部 row , 有一个 col-3元素，也需要类似地设置，但由于我不知道这些应该如何包装等等，我把那些留给你自己设置。当您这样做时，一个很好的提示是为祖先/ sibling 提供不同的背景颜色或边框，您将看到他们的行为。

Update bootply

堆栈片段

.container-fluid {
  height: 100vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid d-flex flex-column">
  <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 col">
    <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>