Bootstrap 3中有五个相等的列

时间:2017-02-28 08:50:55

标签: twitter-bootstrap

您可以将此代码与bootstrap 3一起用于一个col中的5个项目 这是一个简单的例子,对于一行,在bootstrap中有5个项目,你可以看到它。

         

<h3><label class="label label-primary">Bootstrap 3 5 col in container</label><h3>


<div class="container">
  <div class="row">
    <div class="col-xs-3" style="width:20%; height:200px; background-color:#ffd700">
      <h4>#ffd700</h4>
    </div>
    <div class="col-xs-3" style="width:20%; height:200px; background-color:#ff7373">
      <h4>#ff7373</h4>
    </div>
    <div class="col-xs-3" style="width:20%; height:200px; background-color:#ffc0cb">
      <h4>#ffc0cb</h4>
    </div>
    <div class="col-xs-3" style="width:20%; height:200px; background-color:#468499">
      <h4>#468499</h4>
    </div>
    <div class="col-xs-3" style="width:20%; height:200px; background-color:#20b2aa">
      <h4>#20b2aa</h4>
    </div>
  </div>
  <!-- end row -->
</div>
<!-- end container -->

0 个答案:

没有答案