html - 如何在Bootstrap 3网格中的左右各行之间保持相等的间距？

我希望在行中所有块之间都具有相等的间距，就像我们在左侧和右侧一样。默认情况下，引导程序将填充添加到两侧的所有列。并且由于以下原因，它不会在行的第一列的左侧和最后一列的右侧提供额外的间距

.row {
margin-right: -15px;
margin-left: -15px;}

但是在内侧，我们得到了双倍间距，这在特定情况下是我所不希望的。

我在Google上搜索时发现了这个.no-gutter代码段，但它只是删除了我不需要的所有填充。

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

我在第二列中添加了padding-left：0来解决该问题，但它也删除了移动视图的填充（当所有列都占据整个宽度时）。我知道我也可以通过为每个断点编写媒体查询来解决。但是我想知道是否已经有任何引导程序片段可以做到这一点，并且还想知道是否有人也尝试实现了这一目标，想知道他们已经尝试了什么。

我已经在JSFiddle上创建了一个测试用例-http://jsbin.com/wucaho/1/edit?html,css,output

此屏幕截图将使您轻松解决我的问题

最佳答案

我意识到这是一个过时的帖子，但这对我有所帮助，并希望将来可以对其他人有所帮助。

.no-gutter-left > [class*='col-'] {
    padding-left:0;
    padding-right:6px;
}

.no-gutter-right > [class*='col-'] {
    padding-right:0;
    padding-left:6px;
}

将.no-gutter-left应用于第一个字段（左），并将苹果.no-gutter-right应用于第二个字段（右）。

<div class="form-group no-gutter-left">
    <div class="form-group col-sm-6">
        <label class="sr-only">First Name</label>
        <input type="text" class="form-control" placeholder="First Name" name="fname">
    </div>
</div>

<div class="form-group no-gutter-right ">
    <div class="form-group col-sm-6">
        <label class="sr-only">Last Name</label>
        <input type="text" class="form-control" placeholder="Last Name" name="lname">
    </div>
</div>

如果要在一行中包含3列，则可能必须添加一个“ .no-gutter-both”类，其两边都填充3px。