bootstrap 4 栅格列（column）添加 margin 导致 css 溢出，是因为 bootstrap 的 .row 类默认使用了 margin-left: -15px 和 margin-right: -15px 来抵消子元素 .col 的 padding。当你在 .row 上直接设置 margin 时，这个负边距会被放大或错位，导致行宽超出父容器。解决办法是不要直接在 .row 上加 margin，而是给 .row 包裹一个外层 div 并设置 padding，或者使用 bootstrap 自带的间距工具类。
为什么 .row 的负边距会导致溢出？
直接回答：因为 .row 的负边距是为了抵消内部列的内边距，如果外部再施加边距，会破坏这种平衡，导致计算宽度超过父级容器。具体做法是理解 .row 的盒模型设计，它通过负外边距实现“紧凑”布局，任何额外的外边距都会直接加在总宽度上。
<div class="container">
<div class="row" style="margin-top: 20px;">
<div class="col-6">Left</div>
<div class="col-6">Right</div>
</div>
</div>
预期结果：上述代码中，.row 设置了 margin-top: 20px，这不会导致水平溢出，但如果设置 margin-left: 20px，则 .row 的实际左边界会向右移动 20px，而内部的负边距 -15px 依然存在，导致左侧内容可能溢出或对齐错误。更严重的情况是，如果父容器没有足够的空间容纳 margin + width + negative-margin，就会发生溢出。
如何正确地为 Row 添加间距？
直接回答：正确的做法是使用 Bootstrap 提供的间距工具类（如 mt-3, mb-3）或直接给 .row 的父容器添加 padding。不要直接修改 .row 的 margin 属性，除非你清楚自己在覆盖默认的负边距逻辑。
<div class="container">
<div class="row mt-3">
<div class="col-6">Left</div>
<div class="col-6">Right</div>
</div>
</div>
预期结果：使用 mt-3 类，Bootstrap 会自动处理 margin-top，同时保持 .row 内部的负边距机制正常工作，确保列的对齐和容器的完整性。这是官方推荐的做法，避免了手动调整 CSS 带来的副作用。
基于 .row 的 margin 设置的具体问题
直接回答：如果在 .row 上设置了 margin-left 或 margin-right，会导致该行相对于父容器偏移，进而可能引起水平滚动条出现或内容被截断。这是因为 .row 的宽度通常是 100%，加上负边距后，其视觉宽度会发生变化，但实际占据的空间并未减少，反而因为外部边距的增加而扩大了整体布局范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
