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也有一個內部row ，具有col-3元素，也需要類似的設置，盡管由於我不知道這些應該如何包裝等，所以我留給您自己設置。 當您這樣做時，一個很好的技巧是為祖先/兄弟姐妹提供不同的背景顏色或邊框，您將了解它們的行為。

更新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類。