html - Bootstrap margin-bottom在小型设备上不起作用

我是新手。我有嵌套行的问题，其中边缘底部似乎无法在其中一个部分上工作。我要附上图片。第一和第二格之间应该有差距。在大屏幕上运行正常，在小设备上似乎坏了。

这是代码：
CSS：

.row > div {
    margin-bottom: 15px;
}

HTML：

<div class="row">
    <div class="col-xs-12 col-sm-5 col-lg-5">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-lg-6">
                <div class="section">First div</div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-6">
                <div class="section">Second div</div>
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-lg-12">
        <div class="section">Third div</div>
    </div>
</div>

最佳答案

该选择器将解决您的问题。当实际问题是内部各列之间的分隔时，您只是在行内调用第一个div。

.row > div > div {
  margin-bottom: 15px;
}

这将保留该行的所有底边距为15px。

如果您要坚持使用以前的解决方案，则可以用其他方法来实现，这将使页边距底部（15px + 15px）与较大屏幕中的列（15px + 15px）和正常的15px之间的间距相同在小屏幕上。

.row > div {
    margin-bottom: 15px;
}

.row > div > div:nth-child(1) {
    margin-bottom: 15px;
}

关于html - Bootstrap margin-bottom在小型设备上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32831477/