col-padding -如何在Bootstrap 3网格系统中调整檐槽

hec6srdp 于 2023-05-27 发布在 Bootstrap

关注(0)|答案(2)|浏览(121)

我如何减少列之间的精确间隙，使所有列的宽度保持相同，并使它们与页面的其余部分保持一致。

.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

twitter-bootstrap

来源：https://stackoverflow.com/questions/32676288/col-padding-how-to-adjust-gutter-in-bootstrap-3-grid-system

2条答案

按热度按时间

kuarbcqp1#

当你将col的填充从15px减少到5px具有左右边距15px的<div class="row">导致col不均匀时，简单的解决方法是调整<div class="row">的左右边距，将其值从15px更改为-5px，它将推回内部的列，使它们均匀和列'的宽度将保持不变，并且不会影响响应性。只需添加以下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>

赞(0）回复(0）举报 2023-05-27

2lpgd9682#

你可以简单地在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/

赞(0）回复(0）举报 2023-05-27

我来回答

col-padding -如何在Bootstrap 3网格系统中调整檐槽

2条答案

相关问题

热门标签

最新问答