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 来拉伸它们，使它们填满 parent 的高度。

最后，将 col 添加到第二个/最后一个 <div class="row"> 元素，然后得到 flex-grow: 1，以填充左侧的 space。

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

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>

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 - 流体高度布局

Bootstrap 4 - Fluid Height Layout

html

css

flexbox

twitter-bootstrap-4