嵌套行填充溢出到 bootstrap 5 中的父行

Question

我在 bootstrap 5 中有这个示例，其中我将一行嵌套在嵌套在外行中的列中，其中内行的填充为 5，列的填充为 1。我为清楚起见添加了颜色和边框。

<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>

从图像中可以清楚地看到，内行溢出到两侧的外行，因为它覆盖了它的父列，但它没有溢出到顶部或底部。

我的问题是为什么会发生这种情况，我该如何解决？

Answer 1

My question is why does this happen

因为 .row 应用负值 margin-left 和 -right。（它需要它，整个网格才能工作。）

and what can I do to solve it?

您需要始终按行处理列。

您尝试在此处直接设置内行的样式，以便由于负边距导致的重叠变得可见。

您应该先将列元素放入该行（col-12，整个宽度上只有一列），然后为列元素设置样式。

嵌套行填充溢出到 bootstrap 5 中的父行

nested row padding overflows into parent row in bootstrap 5

html

css

padding

bootstrap-5