在某些阈值时,某些列可能会出现比别的列高的情况。
<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>