Bootstrap网格系统半屏

Question

是否可以制作两行，每行4个，屏幕高度为50％？

Bootstrap代码：

<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

如果您使用的是Bootstrap 4 ..

，这很容易实现

.row {min-height: 100vh;}

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

对于Bootstrap 3（非flexbox），请使用此..

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