如何在Bootstrap 3网格系统中调整排水沟

Question

如何缩小各列之间的精确间距，使所有col的宽度保持不变，并使其与页的其余部分保持一致。

​

.blackbox {
        color: #fff;
        background: #000;
}
.content {
        background: #4679BD;
}
.pad-5 [class*="-3"] {
        padding-left:5px;
        padding-right:5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="blackbox">Hey. I'Black Box</div>
        </div>
    </div>
    <div class="row pad-5">
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
    </div>
</div>

​

注意：

• 我尝试了几个解决方案，从不同的答案在这里询问，所以，但没有运气，或可能是，我错过了一些明显的东西。
• <div class="col-xs-3"></div>在每个循环的内部。

小提琴

Answer 1

当15px的填充量减少到5px的时候，<div class="row">的边距左、右15px造成了不均匀，简单的解决方法是调整<div class="row">的左、右边沿，将其值从15px改为-5px，使cols内推平，使cols的宽度保持不变，不影响响应性。只需将以下css添加到样式表中即可

.pad-5 {
    margin-left: -5px;
    margin-right: -5px;
}

​

.blackbox {
        color: #fff;
        background: #000;
}
.content {
        background: #4679BD;
}
.pad-5 {
    margin-left: -5px !important;
    margin-right: -5px !important;
}
.pad-5 [class*="-3"] {
        padding-left:5px;
        padding-right:5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="blackbox">Hey. I'Black Box</div>
        </div>
    </div>
    <div class="row pad-5">
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
        <div class="col-xs-3">
            <div class="content">
                <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p>
            </div>
        </div>
    </div>
</div>

​

Answer 2

您可以简单地在CSS文件中添加折叠代码：

.content{
    margin-left: -10px;
}

或者另一个解决方案，您可以添加新类:例如：

<div class="content removespace">
<p>text here</p>
</div>

和新的css类：

.removespace{
    margin-left: -10px;
}

如果这对你有帮助的话

Fl00r/xqmfqe1h/