Question

我是bootstrap的新手。我有嵌套行的问题，其中边距底部似乎不适用于其中一个部分。我正在附上一张照片。第一和第二div之间应该有差距。它在大屏幕上运行良好，似乎在小型设备上打破。

这是代码： 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>

Answer 1

问题是您使用了错误的选择器。如果您使用：

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

将出现第一个和第二个div之间的差距。此选择器与所有后代div匹配。

Answer 2

此选择器可以解决您的问题。当实际问题是内部列之间的分离时，你只是调用行内的第一个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;
}

Answer 3

在你的第一个div中添加这个类onphonemargin

CTransactionSet transSet;
    string txtLine;
    // read every line from the stream
    while (getline(inFile, txtLine))
    {
        istringstream txtStream(txtLine);
        txtStream.ignore(txtLine.length(), ' ');
        // read every element from the line that is seperated by commas
        // and put it into the vector or strings
        string txtElement;
        CTransaction tran;
        while (getline(txtStream, txtElement, ','))
        {
            tran.insert(txtElement);
        }
        transSet.push_back(tran);
    }

并添加此css

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

Answer 4

你可以尝试这个：

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

}

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

.row > div > div:nth-child(2)
{
    background-color:gray;
}

DEMO FIDDLE

Bootstrap margin-bottom不适用于小型设备

4 个答案: