html - col-padding - 如何在 Bootstrap 3 网格系统中调整装订线

Question

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

.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>

注意:

• 我从 SO 上提出的不同答案中尝试了几种解决方案，但没有成功，或者可能是我遗漏了一些明显的东西。
• <div class="col-xs-3"></div>在每个循环中。

Fiddle

Answer 1

当您从 15px 减少 col 的填充时至 5px <div class="row">左右边距 15px导致col不均匀，解决这个问题的简单方法是调整<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>