Bootstrap中row-sm、row-cols-sm-n类作用及与col-sm、row的区别是什么？

基础概念修正 #

你对col-sm-n的理解存在小偏差：col-sm-n的实际作用是，当设备屏幕宽度≥sm断点（默认576px）时，该列占据n份栅格宽度；当宽度<576px时，列默认占100%宽度按顺序堆叠，和你之前的描述逻辑相反。 #

三类栅格类的核心区别 #

• 普通row类 #

  Bootstrap内置的row本身自带display: flex、flex-wrap: wrap属性，同时带负外边距，用于抵消外层container的默认内边距，是栅格系统的标准行容器。

• 单独的row-sm类 #

  Bootstrap原生没有预定义row-sm这个类，你用这个类的时候它本身不携带任何布局属性，所以必须依赖你自定义的.boxx{display:flex}才能让子元素横向排列，移除.boxx后子元素默认是块级元素，自然就变成堆叠结构，这是正常现象。

• row-cols-sm-n类 #

  这是Bootstrap内置的快速布局类，作用是在屏幕宽度≥sm断点时，强制一行内排列n个列，子元素不需要单独写col-*也能自动分配宽度，适合需要固定每行列数的场景，比逐个给子元素加宽度类效率更高。

你代码布局异常的原因 #

你换成普通row之后响应式效果差，是因为你给每个col-sm-3加了ml-3、ml-5这类固定左外边距。Bootstrap的col-*宽度是按百分比计算的，3个col-sm-3本身总宽度是75%，加上你额外加的margin后，总宽度容易超过行容器的100%，导致元素提前换行，看起来就是异常堆叠。 #

正确写法参考 #

不需要自定义.boxx类，也不要给列加额外的左右外边距，用Bootstrap内置的gutter类控制列间距即可：

.small-box {
  /* 仅保留你自定义的装饰样式，比如背景、边框等 */
}

<div class="container">
  <!-- 用gx-*设置列横向间距，gy-*设置纵向间距 -->
  <div class="row gx-5 mt-2 pt-5 m-5">
    <div class="col-sm-3 small-box py-5 mt-2">a</div>
    <div class="col-sm-3 small-box py-5 mt-2">b</div>
    <div class="col-sm-3 small-box py-5 mt-2">c</div>
  </div>
</div>

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