.col-md-4在手机上忽大忽小，根本原因是未声明基础断点（如col-12），导致xs下宽度退化为内容自适应而非等比收缩；其仅在≥768px生效，不向下覆盖。
Bootstrap 5 的 .col-* 类在断点切换时出现列宽不均匀，根本原因不是类写错了，而是响应式类未形成完整断点链——漏掉基础断点（如 .col-12）会导致小屏下宽度计算退化为内容自适应，而非等比收缩。
为什么 .col-md-4 在手机上列宽忽大忽小
Bootstrap 5 的响应式类是“向上生效”（up to），不是“向下覆盖”。.col-md-4 只在 ≥768px 生效；xs（.col-md-4 失去宽度约束，实际宽度由内容撑开或受父容器 padding 影响，视觉上就“不均匀”。
- 常见现象：三列布局在手机上变成两列宽一列窄，或某列文字多就明显更宽
- 检查方法：用 Chrome DevTools 切到 “iPhone SE” 尺寸，看 computed width 是否仍是 33.333%，还是变成了 auto 或具体像素值
- 错误写法：
<div class="col-md-4">A</div><div class="col-md-4">B</div><div class="col-md-4">C</div> - 正确写法：
<div class="col-12 col-md-4">A</div><div class="col-12 col-md-4">B</div><div class="col-12 col-md-4">C</div>
.row-cols-* 在小屏下失效的真正原因
.row-cols-* 类本身不带断点前缀，它只在当前断点及更高断点生效。漏掉 .row-cols-1 就等于告诉 Bootstrap：“xs 下我不指定列数”，结果就是每列按内容宽度自由伸缩，而不是强制单列堆叠。
-
.row-cols-3在 xs 下不会自动退化为 1 列，它直接不生效，回退到 flex 默认行为（可能多列挤在一起） - 必须显式补全断点链：
class="row row-cols-1 row-cols-sm-2 row-cols-md-3" - 注意顺序：断点必须从小到大排列，否则低断点规则会被高断点覆盖（如
.row-cols-md-3 .row-cols-1中.row-cols-1会被忽略）
嵌套 .row 导致子列宽度错乱
嵌套时子 .row 的负外边距（margin-left: -15px）需被父 .col 的 padding 抵消，但若父列没设 padding 或子 .row 没加 mx-n3，就会导致子列实际宽度溢出、换行或挤压。
立即学习“前端免费学习笔记（深入）”；
- 典型症状：嵌套后第二层列宽变窄、右侧空白异常、响应式切换时列突然跳动
- 修复方式：父
.col必须保留默认 padding（不要写p-0），子.row必须加mx-n3（不是ml-n3 mr-n3，后者在响应式下左右不对称） - 验证技巧：选中子
.row，在 DevTools 的 Layout 面板里看 margin-left/margin-right 是否为 -1rem（即 -16px）
自定义断点或 CSS 变量干扰列宽计算
如果你改过 $grid-breakpoints 或重写了 $container-max-widths，但没同步更新所有依赖这些变量的类（比如 .container-lg 或媒体查询），就会造成断点“错位”：类名声称在 md 生效，实际媒体查询却在 767px 触发，而 Bootstrap 的 md 是 768px（含）。
- 最易忽略的点：Sass 变量修改后，必须重新编译整个 Bootstrap CSS，CDN 引入的
bootstrap.min.css不会响应你的变量改动 - 调试建议：在浏览器控制台运行
getComputedStyle(document.documentElement).getPropertyValue('--bs-breakpoint-md')，确认返回值是否为"768px" - 临时绕过：不用自定义断点，直接写媒体查询
@media (min-width: 768px)，和 Bootstrap 官方断点对齐
列宽不均匀问题往往卡在“以为写了断点就万事大吉”，其实关键在于断点链的完整性、嵌套时的抵消逻辑、以及变量与编译结果的一致性——这三个地方任意一个松动，都会让视觉表现脱离预期。
