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

Question

在使用 Masonry (v3.2.2) 时，它会添加一个不必要的右边距，这会导致 masonry 无法在页面上居中。它也可以在没有“容器流体”类的情况下执行相同的操作，而只需使用“容器”。

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 的检查元素中，它清楚地显示了这个额外的边距被添加。检查代码，没有产生任何边距/填充。请注意，较浅的蓝色是附加填充，白色区域是引导容器中的正常排水沟。理想情况下，每一侧的白色区域都相同，以砖石布局为中心。

查看图片：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;
}