自舉網格系統半屏

Question

是否可以製作兩行，每行4個，屏幕高度爲50％？

引導代碼：

<div class="row"> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
    <div class="col-md-3">.col-md-3</div> 
</div> 

Answer 1

如果你使用引導4這是很容易做到..

.row {min-height: 100vh;} 

https://www.codeply.com/go/URV06dvkN0

自舉3（非Flexbox的）使用這個..

.row {height: 100vh;} 
.row>.col-md-3 {height: 50%;}