Почему масонство добавляет правильную маржу к макету с помощью Twitter-бутстрапа?

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; 
}