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>在每个循环内部。

Fiddle

Answer 1

您只需在CSS文件中添加以下代码：

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

或其他解决方案，您可以添加新类：例如：

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

和新的css类：

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

如果这有助于你的话，请投票

https://jsfiddle.net/Last_Fl00r/xqmfqe1h/

Answer 2

当你将col的填充从15px减少到5px时，<div class="row">左边和右边15px会导致col不均匀，简单的解决方法就是调整<div class="row">左右边距将其值从15px更改为-5px，它会将内部的cols推回并使其均匀，并且col的宽度将保持不变不会影响响应能力。只需将以下css添加到样式表

即可

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: