解决bootstap栅格系统因一行内容太多，导致其它栅格内容堆在一边

在某些阈值时，某些列可能会出现比别的列高的情况。

<div class="row">
  <div class="col-xs-6 col-sm-3">
    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
  </div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

<div class="row">
  <div class="col-xs-6 col-sm-3">
    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
    .col-xs-6 .col-sm-3
    Resize your viewport or check it out on your phone for an example.
  </div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>