Bootstrap布局疑问：xl及以上屏幕下如何让col均分一行空间

问题核心 #

你需要在超大屏（xl断点及以上）让5个卡片列均分整行宽度，同时小屏保持现有换行布局，但之前对row-cols-*的用法理解有误。

纠正row-cols-*的误解 #

row-cols-*的作用是指定对应断点下一行显示的列数量，每个列会自动均分该行的全部可用宽度，不需要给列额外添加col-xl-1这类固定宽度类——后者会让每个列仅占1/12的网格宽度，导致5个列只填满5/12的行空间，这是错误的用法。

正确解决方案（原生Bootstrap，无需自定义CSS） #

直接用row-cols-*系列类替代你原来给列设置的响应式宽度类，代码结构如下：

<div class="container">
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-5">
    <div class="col">
      <div class="card">[content]</div>
    </div>
    <div class="col">
      <div class="card">[content]</div>
    </div>
    <div class="col">
      <div class="card">[content]</div>
    </div>
    <div class="col">
      <div class="card">[content]</div>
    </div>
    <div class="col">
      <div class="card">[content]</div>
    </div>
  </div>
</div>

各断点的布局效果：

• 超小屏（<576px）：row-cols-1 → 一行1个列（等同于col-12）
• 中等屏（≥768px）：row-cols-md-2 → 一行2个列（等同于col-md-6）
• 大屏（≥992px）：row-cols-lg-3 → 一行3个列（等同于col-lg-4）
• 超大屏（≥1200px）：row-cols-xl-5 → 一行5个列，自动均分整行宽度

备选方案（自定义列宽度类） #

如果你坚持要通过col-xl-*类实现，可以自定义一个占比20%的列类（因为100%/5=20%）：

.col-xl-1-5 {
  flex: 0 0 auto;
  width: 20%;
}

然后给列添加该类：

<div class="col col-12 col-md-6 col-lg-4 col-xl-1-5">
  <div class="card">[content]</div>
</div>

这种方法需要额外写CSS，不如原生row-cols方案简洁。

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