Bootstrap栅格系统中多余的列（column）将另起一行排

有时候某些列可能会出现比别的列高的情况，会影响下一行列的排行。
例如：
正常的情况

normal.png

出现问题的情况：

problem.png

为了解决这个问题，建议联合使用 .clearfix 和 响应式工具类。

<div class="row">
  <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>

  <!-- 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>

<div class="clearfix visible-xs-block"></div> 这句是重点。
上面这句代码只能在小屏幕中起作用，这是因为visible-xs-block在小屏幕中可见。
换成不同屏幕，就要换成对应的sm，md，lg了。

visible.png

问题方法来自：https://v3.bootcss.com/css/#grid-responsive-resets