嵌套行填充溢出到引导程序 5 中的父行

Posted 2023-03-06

【中文标题】嵌套行填充溢出到引导程序 5 中的父行

【英文标题】：nested row padding overflows into parent row in bootstrap 5

【发布时间】：2021-11-14 20:23:56

【问题描述】：

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

从图中可以清楚地看到，内行由于覆盖了其父列而溢出到侧面的外行中，但并没有在顶部或底部溢出。

我的问题是为什么会发生这种情况，我可以做些什么来解决它？

【问题讨论】：

“我的问题是为什么会发生这种情况” - 因为.row 应用了负边距-left 和-right。它需要这样，才能使整个网格正常工作。 “我能做些什么来解决它？” - 尊重。这。网格。您不应该尝试在此处设置“裸行”的样式，而应首先将适当的列元素放入该内行。然后使用它。

@CBroe - 我找不到确切的 dup 来关闭它，所以你可以添加它作为答案吗？

【参考方案1】：

我的问题是为什么会发生这种情况

因为.row 应用否定的margin-left 和-right。 （它需要这样，才能使整个网格正常工作。）

我能做些什么来解决它？

您需要始终使用行中的列。

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

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