Bootstrap栅格疑问：col-sm为何未覆盖col-4？

核心原因：col-sm 和 col-sm-* 是完全不同的两类布局类 #

你混淆了Bootstrap网格系统中固定比例列和弹性均分列的作用逻辑：

1. 为什么 col-sm-2 能覆盖 col-4？

col-sm-2 是指定断点的固定比例列，它的作用是：在sm断点（屏幕≥576px）及以上，强制设置列宽度为 2/12。

它的CSS规则在媒体查询内定义，且优先级和全局的col-4一致，由于Bootstrap的CSS加载顺序是先全局列、后断点列，所以col-sm-2的样式会覆盖col-4的固定宽度，最终呈现2/12的效果。

2. 为什么 col-sm 看起来没覆盖 col-4？

col-sm 是指定断点的弹性均分列，它的作用不是设置固定比例，而是让列在sm断点及以上变成「弹性可伸缩的列」，具体表现为：

• CSS规则为 flex: 1 0 0%，允许列根据父容器剩余空间自动分配宽度
• 如果同行有N个col-sm列，每个列会均分父容器宽度（即占 100%/N）

你看到的「小屏幕下宽度还是4/12」，大概率是因为同行刚好有3个这样的列：100%/3 ≈ 33.33%，和col-4的4/12宽度完全一致，视觉上没有变化，所以误以为col-sm没生效。

你可以通过以下操作验证它的作用：

• 在同行再加1个col-sm列，此时4个列会各占25%（3/12），而如果是col-4的话会因为总宽度超过100%而换行
• 把同行的列改成2个col-sm，此时每个列会占50%（6/12），明显和col-4的宽度不同

总结 #

• 要设置固定比例宽度，用带数字的类：col-{breakpoint}-*（比如col-sm-2）
• 要设置弹性均分宽度，用不带数字的类：col-{breakpoint}（比如col-sm），它的效果取决于同行的列数量

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