Bootstrap栅格实现XL/LG下10列分两行、多断点列规则兼容问题

解决方案 #

你遇到的是Bootstrap栅格手动拆行导致的跨断点适配问题，直接用内置的行列数控制类就能完美解决，不需要手动拆分row容器。

最优方案（Bootstrap 4.0及以上版本） #

用row-cols-*系列类直接指定不同断点下每行的列数，所有10个列放在同一个row中即可，自动适配所有断点规则：

<div class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-5">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
</div>

参数说明：

• row-cols-sm-2：SM及以上尺寸每行显示2列，和你需要的col-sm-6效果完全一致
• row-cols-md-3：MD及以上尺寸每行显示3列，对应col-md-4的效果
• row-cols-lg-5：LG及以上尺寸每行显示5列，10个列自动拆为2行，完全符合XL/LG断点的要求

兼容Bootstrap 3版本方案 #

如果使用不支持row-cols的低版本Bootstrap，可通过自定义五等分列+响应式清除浮动实现：

1. 先添加自定义CSS规则：

@media (min-width: 1200px) {
  .col-lg-5ths {
    width: 20%;
    float: left;
  }
}

2. 栅格代码如下，所有列放在同一个row中，仅在第5个列后加LG断点生效的强制换行标签：

<div class="row">
    <div class="col-lg-5ths col-md-4 col-sm-6">1</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">2</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">3</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">4</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">5</div>
    <!-- 仅LG断点生效的清除浮动，强制换行 -->
    <div class="clearfix visible-lg-block"></div>
    <div class="col-lg-5ths col-md-4 col-sm-6">6</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">7</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">8</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">9</div>
    <div class="col-lg-5ths col-md-4 col-sm-6">10</div>
</div>

原方案问题说明 #

• 拆分两个row的方案：MD断点下每行只能放3个列，第一个row的5个列会占2行半的位置，第二个row的内容会从新行开始，导致中间出现空白错位
• 单个row用col-lg的方案：col-lg为自动平分宽度类，10个列会全部挤在同一行，不会自动拆分为2行

内容的提问来源于stack exchange，提问作者Nitneuq