如何将屏幕大小分为六个部分Twitter Bootstrap？

Question

我想将屏幕划分为六个部分，其中包含引导程序，如下面的形状

Answer 1

您可以使用vh css单位为每列指定视口高度。

<强> HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
    <div class="col-sm-6">3</div>
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
    <div class="col-sm-6">6</div>
  </div>
</div>

<强> CSS：

@media (min-width: 768px) {
  .col-sm-6 {
    height: 33.33vh;
  }
}

＆＃13;

＆＃13;

.container-fluid .col-sm-6 {
  border: 1px solid black;
  background: green;
  height: 100vh;
  color: white;
}
@media (min-width: 768px) {
  .container-fluid .col-sm-6 {
      height: 33.33vh;  
  } 
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
    <div class="col-sm-6">3</div>
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
    <div class="col-sm-6">6</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
  </div>
 </div>

你可以使用这样的twitter bootstrap类，并为每个div提供相同的高度。

.sameHeight{
  height:30px;
}