Bootstrap4 align-items-end不工作

所以我一直在爲這兩週的更好的一半工作，似乎無法按預期得到這個工作。我開始認爲這可能是問題中的行/列有多深，但真的想獲得一些外部洞察力。Bootstrap4 align-items-end不工作

簡而言之，它是包含 - > 2行的頁面，其中第二行包含 - > 2列，其中第二行包含 - > 3行是麪包屑，每個頁面的主要內容和頁腳。如果頁面需要擴展導航應保持靜態。我隱約記得，當開始看到一些人試圖做類似的佈局，但一直沒能找到那些帖子。

下面是爲剝離下來的一個形式，我能得到它有問題的代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <!-- Required meta tags --> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

     <!-- Bootstrap and self-made CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">  

     <!-- various imports --> 
     <link href="https://fonts.googleapis.com/css?family=Chivo:900" rel="stylesheet"> 
     <style> 
     html, body{ 
      height: 100%; 
      width: 100%; 
     } 
     h2 { 
      font-family: 'Chivo', sans-serif; 
     } 
     </style> 
    </head> 
    <body style="background-color: #000;"> <!-- bgc: black --> 
    <div class="container-fluid h-100"> 
     <div class="row h-25"style="background-color: #F00;"> <!-- bgc: red --> 
      <div class="col"> 
       <h1>In the header!</h1> 
      </div> 
     </div> 
     <div class="row h-75" style="background-color: #0F0;"> <!-- bgc: green --> 
      <div class="col-sm-2 no-gutters h-100" style="background-color: #00F;"> <!-- bgc: blue --> 
       <nav> 
        <h2>In the nav bar!</h2> 
       </nav> 
      </div> 

      <div class="col-sm-10 no-gutters h-100" style="background-color: #FF0;"> <!-- bgc: yellow --> 
       <div class="row align-items-start" style="background-color: #FFF;"> <!-- bgc: white --> 
        <div class="col"> 
         <main> 
          <h2>In the breadcrumb!</h2> 
         </main> 
        </div> 
       </div> 
       <div class="row align-items-center" style="background-color: #0FF;"> <!-- bgc: cyan --> 
        <div class="col"> 
         <main> 
          <h2>In the main!</h2> 
         </main> 
        </div> 
       </div> 
       <div class="row align-items-end" style="background-color: #F0F;"> <!-- bgc: magenta --> 
        <div class="col"> 
         <footer> 
          <h2>In the footer</h2> 
         </footer> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
     <!-- Optional JavaScript --> 
     <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
    </body> 
</html>

我的問題是：
1.可這樣的佈局，即使在bootstrap4做什麼？ 2.如果可以，需要進行哪些更改才能使其正常工作？ 3.當在較小的屏幕上摺疊時，「nav列」保持在h-100而不是縮小，我是否正確使用子類來進行流體縮放？

來源

2017-10-01 Jesus Garcia

這是可以做到，但是如果你使用的是bootstrap4，建議使用flexbox而不是容器和行。 https://v4-alpha.getbootstrap.com/utilities/flexbox/ –

對不起，我在引導程序4中沒有太多使用行和容器的經驗，但是我可以爲您提供這種佈局的flexbox實現。如果您瞭解flexbox，則可以使用下面的代碼作爲參考來創建您自己的佈局。

以下是用於實現您提到的佈局層次結構的準系統flexbox代碼。我意識到這不是最好的答案，但希望它有幫助。

<div class="container-fluid d-flex flex-column" style="height: 100%"> <!-- Main container declared as flexbox column --> 

    <div class="h-25"> <!-- Row 1 in the container --> 
    </div> 

    <div class="h-75 d-flex row"> <!-- Row 2 in the container. This itself is a flexbox row --> 

     <div class="col-sm-2"> <!-- Column 1 of the row --> 
     </div> 

     <div class="col-sm-10 d-flex flex-column"> <!-- Column 2 of the row --> 

      <div> <!-- Row 1 of the column --> 
      </div> 

      <div> <!-- Row 2 of the column --> 
      </div> 

      <div> <!-- Row 3 of the column --> 
      </div> 

     </div> 

    </div> 

</div>

參考boostrap4 Flexbox的文檔來了解Flexbox的https://v4-alpha.getbootstrap.com/utilities/flexbox/：

編輯

這裏有一個工作plunker：https://plnkr.co/edit/WWT5XoHyvLf2paKQItSH?p=preview

來源

2017-10-01 06:15:46

Bootstrap4 align-items-end不工作

回答

相關問題