如何實現Bootstrap中的全高列4

我正在使用Bootstrap 4 Beta試圖使2列全高，無論屏幕大小如何。如何實現Bootstrap中的全高列4

下面的代碼很好用，無論我查看這個設備的哪個設備，這兩列都是全高。

但是，當我在container內，在row的上方添加引導程序導航欄時，我開始在頁面上看到額外的高度，並最終得到一個滾動條。

如果我沒有弄錯，bootstrap沒有考慮導航欄的高度。

我不知道如何解決這個問題。

DEMOhttps://jsfiddle.net/a2z4paes/1/

嘗試取出nav塊，你會看到列將成爲全高度，沒有滾動條。

這是我的HTML

<div class="container h-100"> 
    <div class="row justify-content-center h-100"> 
     <div class="col-md-8" style="background: lightgreen; height: 100%"> 
      <h1>test</h1> 
     </div> 

     <div class="col-md-4" style="background: lightblue;"> 
      <h1>test</h1> 
     </div> 
    </div> 
</div>

來源

2017-09-03 Halnex

Flexbox將是最佳的解決方案，即使你可以用鈣（）函數修復它，但它更像是一個黑客。下面是更新小提琴，我已經做了以下 https://jsfiddle.net/sandeepcnath/a2z4paes/4/

給出刪除類H-100的步驟，

添加這種風格到容器

container { 
height: 100%; 
display: flex; 
flex-direction: column; 
}

然後到div哪些是導航的兄弟，（具有類行& justify-content-center的div）添加樣式 flex：1;

然後你可以看到高度是100％，即使你打開或關閉導航欄，滾動條也不會出現。

來源

2017-09-03 19:05:40

如何實現Bootstrap中的全高列4

回答

相關問題