Css 如何在不破坏设计的情况下在引导列之间创建边距？

我有我的简单标记

<div class="row">
    <div class="col-lg-6 loginField">
data

    </div>
    <div class=" col-lg-6 loginField">
        <div class="">
            test
        </div>
    </div>
</div>

.loginField{
background-color:white;
}

数据
测试
.后勤场{
背景色：白色；
}

所以我的问题是，我的桌面屏幕上有一条白线，但我想在这两列之间留出10px的空间，而不破坏响应性设计。现在，如果我切换到较小的屏幕，它可以工作，但在desctop上没有空间，如果我添加边距，这个边距将显示在较小的屏幕上，这很难看。

---

另外，当我说它在更小的屏幕上工作时，我的意思是这两列在彼此下面移动，白线的宽度和它们应该的一样

您只需在响应设计中模拟与bootstrap.css中相同的断点：

CSS:

@media (min-width: 1200px) {
    .margin-left-10 { margin-left: 10px; }
}

<div class="col-lg-6 loginField">
    <div class="margin-left-10">
        test
    </div>
</div>

HTML:

@media (min-width: 1200px) {
    .margin-left-10 { margin-left: 10px; }
}

<div class="col-lg-6 loginField">
    <div class="margin-left-10">
        test
    </div>
</div>

测试

如果更改了断点，则需要更新该

min-width

，但这是引导的大列的默认

min-width

---

当屏幕变小时，该规则将停止应用，因此不会影响较小的屏幕。

如果删除灰色，问题仍然存在there@Timsen对不起，什么问题？据我所知，您只希望在大屏幕上保留

边距

，而不是在小屏幕上。还有其他原因吗？我想只有我失败得很惨，但是你能举一个更精确的例子，在这两个‘col-lg-6’之间有10像素的余量吗。因为现在第二列中的内容被推到了10px的一边，但我想把整个列推到右边，因为我想用白色的背景色。哦，我明白了！抱歉，在两列之间留有精确的10px边距是不可能的。我上面概述的最好的选择是让一个内部元素做边距（因此，将

背景色

放在一个包装的“内部元素”上，其中一个元素的左边距为10px），它可以做你想要的事情。如果您想在

col-lg-6

s上保留

背景色

，唯一的选择是使用

.col-lg-offset-1

并从其中一列中删除1个单位的大小，因此：…1/2

OneTwo

.2/2