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中的弹性网格来使用整个屏幕高度？

谢谢！

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元素，也需要设置类似，但我不知道如何这些应该包装等，我留给你自己设置。当你这样做时，一个很好的建议是给祖先/兄弟姐妹提供不同的背景颜色或边框，你会看到它们的行为。

Update bootply

Stack snippet

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

Answer 2

这对我有用：

<div class="container-fluid d-flex flex-column" style="height:100vh; padding:0px; background-image:url('images/header_bg_1.jpg'); background-size:cover; ">

我将高度设置为100vh，并添加了flex类。

Bootstrap 4 - 流体高度布局

2 个答案: