为什么 Masonry 使用 Twitter Bootstrap 为布局添加右边距？

Question

使用 Masonry (v3.2.2) 时，它添加了不必要的右边距，导致砌体无法在页面上居中。它在没有 'container-fluid' class 的情况下也做同样的事情，只有 'container'.

HTML：（我也在加载最新版本的 Masonry 和 ImagesLoaded

    <div class="container-fluid" id="content_container">
      <div class="row">
        <div class="col-sm-12">
            <div class="masonry js-masonry" data-masonry-options='{ "columnWidth": 350, "gutter": 0}'>
              <div class="item w2"><img src="http://placehold.it/350x350"></div>
              <div class="item w3"><img src="http://placehold.it/350x350"></div>
              <!-- etc...until 8 images are rendered -->
            </div>
        </div>
      </div>
    </div>

CSS:

.item {
 width: 350px;
 margin: 0px;
 float: left;}

 .item.w2 { width:  350px; }
 .item.w3 { width:  350px; }
 .item.w4 { width:  350px; }

在 Firefox 的检查元素中，它清楚地显示了添加的额外边距。检查代码，没有生成任何 margin/padding。请注意，浅蓝色是额外的填充，白色区域是 bootstrap 容器的正常间距。理想情况下，每一侧的白色区域都相同，以砌体布局为中心。

查看图片：http://i.stack.imgur.com/YNSKh.jpg

JSFiddle：http://jsfiddle.net/jco4xrvr/2/

Answer 1

这是一个修复程序 jsfiddle。

基本上您需要使用 isFitWidth 并为您的砖石容器设置 css：

HTML:

 <div class="container-fluid" id="content_container">
  <div class="row">
    <div class="col-sm-12">
        <div class="masonry js-masonry" data-masonry-options='{ "columnWidth": 350, "gutter": 0,"isFitWidth": true}'>
            <div class="item w2">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w3">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
        </div>
    </div>
</div>
</div>

添加这个 CSS:

.masonry {
margin: 0 auto;
}

为什么 Masonry 使用 Twitter Bootstrap 为布局添加右边距？

Why does Masonry add a right margin to a layout with Twitter Bootstrap?

twitter-bootstrap

jquery-masonry

masonry