Bootstrap5实现10个响应式列同行显示的问题求助

问题说明 #

我在Bootstrap5中尝试让10个带卡片的列在同一行显示，但当前用普通col类时，显示5-6个列后就自动换行；如果改用col-1类，列会失去响应式特性，且无法占满屏幕宽度。

问题代码示例 #

<div class="row">
  <div class="col">
    <div class='card'>
      <div class='card-body'>
        <h5 class='card-title'>TITRE</h5>
        <p class='card-text'>TEXT</p>
        <p class='card-text'>text</p>
      </div>
    </div>
  </div>
  <!-- 需复制上述col模块至10个 -->
</div>

效果截图描述 #

• 普通col效果：仅显示5-6个卡片列后就换行，剩余列自动转到下一行
• col-1效果：10个列挤在一行，但列宽固定过小，无法自适应屏幕宽度，失去响应式布局特性

解决方案 #

方法1：Flex布局实现响应式同行（推荐） #

给父级row添加flex-nowrap flex-wrap-sm-wrap类，同时保持列使用col，既保证大屏下10列同行，又能让小屏幕自动换行适配：

<div class="row flex-nowrap flex-wrap-sm-wrap">
  <div class="col">
    <div class='card'>
      <div class='card-body'>
        <h5 class='card-title'>TITRE</h5>
        <p class='card-text'>TEXT</p>
        <p class='card-text'>text</p>
      </div>
    </div>
  </div>
  <!-- 重复9次上述col模块 -->
</div>

• flex-nowrap：强制row内的列不换行，确保10列在大屏显示同一行
• flex-wrap-sm-wrap：当屏幕宽度小于sm断点（默认576px）时，自动切换为换行布局，适配移动端
• col：让所有列均分row宽度，自动适配10列的布局比例

方法2：自定义列宽度精准控制 #

如果需要更精细化的宽度控制，可以自定义CSS类，适配10列网格并添加响应式调整：

<style>
  .col-10th {
    flex: 0 0 auto;
    width: 10%; /* 100% ÷ 10 = 10%，刚好10列占满一行 */
  }
  /* 小屏幕下每行显示2个列 */
  @media (max-width: 576px) {
    .col-10th {
      width: 50%;
    }
  }
</style>
<div class="row">
  <div class="col-10th">
    <div class='card'>
      <div class='card-body'>
        <h5 class='card-title'>TITRE</h5>
        <p class='card-text'>TEXT</p>
        <p class='card-text'>text</p>
      </div>
    </div>
  </div>
  <!-- 重复9次上述col模块 -->
</div>

问题根源说明 #

• 普通col换行：Bootstrap的col会根据内容最小宽度自动调整，当10个列的内容总宽度超过row容器时，就会触发换行
• col-1失效：col-1是固定占1/12的宽度，10个col-1总宽度仅为10/12，无法占满屏幕，且固定宽度导致失去响应式自适应能力

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