bootstrap整個頁面div行80％和20％

Question

如何通過引導完成div行80％和20％的整個頁面。

---------- 
|  | 
|  | 
|  | 
|  | 
---------- 
|  | 
---------- 

是的，我可以用表實現，但我想知道將它能夠與格列類

Answer 1

您可以使用現代瀏覽器的'vh'度量設置視口高度的百分比塊大小，然後使用Bootstraps - 容器流體獲得100％寬的容器來包裝兩個80/20分區。

<div class="container-fluid"> 
    <div class="eighty"> 
    80% 
    </div> 
    <div class="twenty"> 
    20% 
    </div> 
</div> 

和風格他們：

.eighty { 
    height: 80vh; 
    border: 1px solid red; 
    display: block; 
} 

.twenty { 
    height: 20vh; 
    border: 1px solid blue; 
    display: block; 
} 

這裏有一個plnkr：https://plnkr.co/edit/VASmt6damfbQCk2zcAg0?p=preview

Answer 2

做一個基本的引導佈局這樣，

<div class="content"> 
    <div class="row eighty"> 
    <div class="col-xs-6"> 
     First column 
    </div> 
    <div class="col-xs-6"> 
     Second column 
    </div> 
    </div> 
    <div class="row twenty"> 
    <div class="col-xs-6"> 
     First column 
    </div> 
    <div class="col-xs-6"> 
     Second column 
    </div> 
    </div> 

可以將行高增加到窗口高度的百分比。

html { 
    height:100%; 
} 

body { 
    height:100%; 
    margin:0; 
} 

.content { 
    height:100%; 
} 

.eighty { 
    height:80%; 
} 

.twenty { 
    height:20%; 
} 

請注意html，body和.content元素如何全部設置爲窗口高度的100％。