在响应式栅格系统（如 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 后，元素仍严格保持设定的百分比宽度，响应式流自然稳定。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

⚠️ 注意事项：

• ❌ 避免仅对 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。一行重置代码即可根治，是响应式开发的必备基础实践。