Bootstrap：按屏幕尺寸设置每行列数的正确实现方案

核心结论 #

把所有列放在同一个row容器中的写法完全正确，且是Bootstrap官方推荐的标准实现方式，第二种手动拆分多个row的做法不推荐使用。

为什么单row写法是正确的？ #

Bootstrap 5的网格系统基于Flexbox实现，row作为flex容器，内置了列自动换行的特性：当容器内列的总宽度（按对应断点的col-*类计算）超过12列的限制时，多余的列会自动换行到下一行。这种机制天生支持响应式适配，不同屏幕尺寸下会根据你设置的col-lg-*/col-md-*/col-sm-*类自动调整每行的列数：

• 大屏幕（lg断点）：col-lg-3意味着每行显示4列（3×4=12）
• 中屏幕（md断点）：col-md-4意味着每行显示3列（4×3=12）
• 小屏幕（sm断点）：col-sm-6意味着每行显示2列（6×2=12）
• 超小屏幕（<576px）：注意Bootstrap 5已移除xs断点，直接用col-6即可实现每行2列的布局

为什么不推荐手动拆分多个row？ #

1. 增加逻辑复杂度：当后端返回的项目数量未知时，你需要针对不同断点计算每行的项目数，动态生成多个row，这会额外增加后端或前端的处理逻辑，完全没必要。
2. 响应式一致性风险：手动拆分的row在屏幕尺寸切换时，可能出现布局错位——比如小屏幕下手动拆分的每行2列，切换到中屏幕后需要每行3列，此时原有的手动换行逻辑会失效，导致布局混乱。
3. 违背Bootstrap设计理念：网格系统的核心价值就是让开发者无需手动控制换行，通过col-*类自动适配不同屏幕，手动拆分row完全浪费了这一特性。

优化后的代码示例 #

修正了xs断点的冗余写法，使用Bootstrap 5的标准类：

<div class="row g-3">
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">Item1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">Item2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">Item3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">Item4</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">Item5</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-6">Item6</div>
    <!-- 更多项目 -->
</div>

• 新增的g-3类用于设置列之间的间距（gutter），替换手动添加的margin/padding，更符合Bootstrap规范。

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