Question

我有简单的标记

<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;
}

所以我的问题是我在桌面屏幕上得到1条白线，但我想在这两列之间留出10像素的空间，而不会破坏响应式设计。现在，如果我切换到较小的屏幕它可以工作，但在desctop没有空间，如果我添加保证金，这个边距在较小的屏幕上坚持这是丑陋的。
附：当我说它在较小的屏幕上工作时，我的意思是那些2列彼此相互移动，白线的宽度是他们的购物时间。

Answer 1

您只需要在响应式设计中模仿相同的断点，就像在bootstrap.css中一样：

http://jsfiddle.net/G6nWh/4/

<强> CSS：

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

<强> HTML：

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

如果您更改了断点，则需要更新min-width，但这是Bootstrap大型列的默认min-width。

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

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

1 个答案: