爲什麼Masonry使用Twitter Bootstrap爲版面添加右邊距？

Question

當使用砌體（v3.2.2）時，它會添加一個不必要的右邊距，導致砌體無法居中在頁面上。它也做同樣的事情，沒有'容器流體'類，只有'容器'。

HTML：（我也是裝載最近砌體的版本和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; 
}