为什么单独一行中的最后一个 div 与上面一行中的 div 重叠答案

【问题标题】：Why is the last div in a seperate row overlapping a div in a row above为什么单独一行中的最后一个 div 与上面一行中的 div 重叠
【发布时间】：2021-01-20 14:43:44
【问题描述】：

对于我的一生，我无法弄清楚为什么我的 <div class="row"> 会重叠。

我已经搜索过，但我找不到答案。我尝试在不同的行之间添加<div class="col-12 w-100"></div>，但这没有帮助。我还确保没有 position: absolute。

感谢您的帮助和希望的解释 =)

https://jsfiddle.net/azjxe3c6/

（最后一行，div col-8 bg-dark在上面重叠）

    <div class="row container-fluid justify-content-center box">
        <div class="col-2 box">
        </div>
        <div class="col-2 box">
        </div>
        <div class="col-2 box">
        </div>
        <div class="col-2 box">
        </div>
    </div>
    <div class="col-12 w-100"></div>
    <div class="row container-fluid justify-content-center box">
        <div class="col-4 box r">
        </div>
        <div class="col-4 box b">
        </div>
        <div class="w-100">
        </div>
        <div class="col-4 box b"> <!-- overlapping here -->
        </div>
        <div class="col-4 box r"> <!-- and here -->
        </div>
        <div class="w-100">
        </div>
        <div class="col-4 box r">
        </div>
        <div class="col-4 box b">
        </div>
    </div>
    <div class="col-12 w-100"></div>
    <div class="row container-fluid justify-content-center box">
        <div class="col-8 box bg-dark">
        </div>
    </div>

CSS


.box{
    border: 2px solid black;
    height: 50px; /* this was causing the problem */
}

.r{
    background-color: red;
}

.b{
    background-color: blue;
}

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

没关系...问题出在 CSS 上，更具体地说，盒子元素的高度导致了问题。

【讨论】：