如何在Bootstrap的row-cols-auto布局中设置最大3列？

方案一：使用Bootstrap内置类（推荐） #

直接组合Bootstrap的row-cols-3和row-cols-auto类，既能限制每行最多3列，又保留列宽随内容自适应的特性：

<div class="row row-cols-3 row-cols-auto">
  <div class="col" id="vid_0">你的卡片内容</div>
  <div class="col" id="vid_1">你的卡片内容</div>
  <div class="col" id="vid_2">你的卡片内容</div>
  <div class="col" id="vid_3">你的卡片内容</div>
  <div class="col" id="vid_4">你的卡片内容</div>
  <div class="col" id="vid_5">你的卡片内容</div>
</div>

• row-cols-3：强制每行最多容纳3列
• row-cols-auto：让每列宽度由内部卡片内容决定（而非均分容器宽度）

如果需要响应式适配（比如小屏幕单行1列，中等及以上屏幕单行3列），改用响应式row-cols类：

<div class="row row-cols-1 row-cols-md-3 row-cols-auto">
  <!-- 子元素保持不变 -->
</div>

（注：md为Bootstrap默认断点，对应屏幕宽度≥768px，可根据需求替换为sm/lg/xl等）

方案二：自定义CSS精准控制 #

若需无视屏幕尺寸，始终限制每行最多3列，可添加自定义CSS类：

.max-3-cols {
  flex-wrap: wrap;
}
.max-3-cols > .col {
  flex: 0 0 auto; /* 保持内容自适应宽度 */
  max-width: calc(100% / 3); /* 限制单列最大宽度为容器1/3，避免一行超过3个 */
}

然后修改HTML结构：

<div class="row row-cols-auto max-3-cols">
  <!-- 子元素保持不变 -->
</div>

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