Question

使用Masonry（v3.2.2）时，它会添加一个不必要的右边距，使得砌体无法在页面上居中。如果没有容器流体，它也可以做同样的事情。只有＆＃39;容器＆＃39;。

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

查看图片：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为布局添加了正确的边距？

1 个答案: