Question

我有这样的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__

感谢您的建议。

Answer 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

boostrap左右边距与元素之间相同

1 个答案: