在响应式栅格系统（如 Bootstrap）中直接为 .col-* 类添加 padding 会导致布局错乱，根本原因是未统一设置 box-sizing: border-box，致使 padding 被额外计算进元素总宽度，破坏 100% 宽度栅格流。
在响应式栅格系统（如 bootstrap）中直接为 `.col-*` 类添加 `padding` 会导致布局错乱，根本原因是未统一设置 `box-sizing: border-box`，致使 padding 被额外计算进元素总宽度，破坏 100% 宽度栅格流。
当开发者尝试为列容器（如 .col-6、.col-md-4）添加内边距（例如 padding: 5px）以增强内容间距时，常遇到「列换行异常」「宽度溢出」「移动端堆叠失效」等响应式崩溃现象。其本质并非 CSS Grid 或 Flex 布局缺陷，而是盒模型（box model）默认行为所致：标准盒模型下，width 仅指内容区宽度，padding 和 border 会额外增加元素实际占用空间。在栅格系统中，各列通常按百分比宽度（如 flex: 0 0 50%）并排排列，一旦 padding 推高实际宽度，就会触发换行或水平滚动。
✅ 正确解法是全局启用 border-box 盒模型：
*,
*::before,
*::after {
box-sizing: border-box;
}该规则需置于样式表最顶端（优先于所有其他样式），确保所有元素（包括 .col-*、容器、自定义组件）均以 border-box 计算尺寸：此时 width 包含 content + padding + border，添加 padding: 5px 后，元素仍严格保持设定的百分比宽度，响应式流自然稳定。
⚠️ 注意事项：
- ❌ 避免仅对 body 或局部选择器设置 box-sizing（如 body { box-sizing: border-box }），它不会继承给子元素（box-sizing 不继承）；
- ❌ 不要将 box-sizing 写在 .col-* 类内部单独覆盖——既冗余又易遗漏；
- ✅ 若使用现代框架（Bootstrap 5+、Tailwind CSS），该重置已内置，但仍建议自查项目是否被覆盖或禁用；
- ✅ 如需更精细控制，可配合 gap 属性替代列内 padding（推荐用于 Flex/Grid 容器）：
<div class="row" style="gap: 10px;"> <!-- 替代为每列加 padding --> <div class="col-6">Content A</div> <div class="col-6">Content B</div> </div>
总结：响应式栅格中“加 padding 就崩”的问题，90% 源于缺失全局 box-sizing: border-box。一行重置代码即可根治，是响应式开发的必备基础实践。
