引导左右边距与元素之间相同答案

【问题标题】：boostrap left and right margin same as between elements引导左右边距与元素之间相同
【发布时间】：2017-06-25 20:50:47
【问题描述】：

我有这样的 boostrap 元素：

<div class="row">
    <div class="col-xs-6 col-md-3"><img...></div>
    <div class="col-xs-6 col-md-3"><img...></div>
    <div class="col-xs-6 col-md-3"><img...></div>
    <div class="col-xs-6 col-md-3"><img...></div>
</div>

视觉上我有这个（_ 表示空格）：

_IMG__IMG__IMG__IMG_

在每张图片的左侧和右侧，我有一个空格，所以在图片之间我有 2 个空格。但在最左边和最右边，我只有一个空间。这个空间发生了变化，因为它是一个响应式设计。如何在最左边和最右边有与图像之间相同的空间来获得这个：

__IMG__IMG__IMG__IMG__

感谢您的建议。

【问题讨论】：

标签： twitter-bootstrap alignment spacing

【解决方案1】：

Bootstrap 的 row 具有负边距，因此最左边和最右边列之外的装订线间隔适当，如果需要，可以是整个页面宽度。

在您的情况下，您不希望内容全页宽度，因此您可以像这样覆盖 row 上的负边距...

.row-reset {
    margin-left:0;
    margin-right:0;
}

HTML

<div class="container-fluid">
    <div class="row row-reset">
        <div class="col-xs-6 col-md-3"><img ..></div>
        <div class="col-xs-6 col-md-3"><img ..></div>
        <div class="col-xs-6 col-md-3"><img ..></div>
        <div class="col-xs-6 col-md-3"><img ..></div>
    </div>
</div>

http://www.codeply.com/go/4ujJLUpx9D

【讨论】：