Bootstrap 5嵌套row内边距溢出到父row的原因及解决方案咨询

示例代码 #

<div class="row p-5" style="background-color: #0F4C99; border: 3px solid black">
    <div class="col-12 p-1" style="background-color: #E6005F; border: 3px solid black">
        <div class="row p-5" style="background-color: #E6B625; border: 3px solid black">
            
        </div>
    </div>
</div>

现象截图 #

产生原因 #

Bootstrap 5的栅格系统中，.row类默认带有左右各-0.75rem的负外边距，作用是抵消外层.col默认的左右0.75rem内边距，保证栅格内容边缘对齐。
当前场景中，父级.col-12被手动设置了p-1类，左右内边距仅为0.25rem，远小于.row默认的左右负外边距，剩余的负外边距就会导致内层row向左右两侧溢出。而.row默认没有上下方向的负外边距，所以上下方向不会出现溢出问题。

可行解决方法 #

• 方案1：给内层.row添加gx-0类，取消左右 gutter 对应的负外边距，完全避免横向溢出。修改后内层row代码为：

<div class="row p-5 gx-0" style="background-color: #E6B625; border: 3px solid black"></div>

• 方案2：保留.col的默认内边距，删除父级.col-12上的p-1类，让默认的0.75rem内边距刚好抵消row的负外边距。
• 方案3：如果必须保留父级col的p-1设置，可以给父级col添加overflow-x: hidden样式，直接截断溢出的内容，不过该方案属于兜底处理，可能会意外切掉内层row的边缘内容，不优先推荐。

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