Кладка с Bootstrap 3

Question

При использовании начальной загрузки 3 и масонства Десандро, я застреваю в странной проблеме, в которой кажется, что когда вызывается масонство, к ширине моих изображений добавляются дополнительные 10px, в результате чего кладка переходит от желаемых 3 столбцов к 2 (но все еще работает правильно в 2). Я думаю, что это как-то связано с новым классом Bootstrap.img-отзывчивым.

Эту проблему можно увидеть здесь: http://jsfiddle.net/68qxE/2/ (просто обязательно увеличьте ширину результата), но если вы предпочитаете:

Вот мой HTML:

<div class="container">
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/1"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/2"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/3"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/4"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" /></a>
  </div>
  <div class="post-box col-lg-4 col-md-4 col-sm-4">
    <a href="/posts/5"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" /></a>
  </div>
</div>

Вот мой Javascript:

$(document).ready(function(){
  var $container = $('.container');

  $container.imagesLoaded( function() {
    $container.masonry({
      itemSelector        : '.post-box',
      columnWidth         : '.post-box',
      transitionDuration  : 0
    });
  });
});

И вот мой CSS:

.img-thumbnail {
  padding: 10px;
}

.post-box {
  margin: 15px 0 15px 0;
}

Теперь, когда страница изначально загружена, и до того, как какой-либо из javascript будет выполнен, ширина col-lg-4 будет 350px. Но как только вызывается javascript, ширина столбца col-lg-4 увеличивается до 360px, и я считаю, что именно из-за этого переход от макета с тремя столбцами к макету с двумя столбцами.

Answer 1

Ответ был дополнительно обсужден и решен здесь: https://github.com/desandro/masonry/issues/405

Answer 2

Я не думаю, что это вызвано imagesLoaded. Проблема в том, что есть дополнение .container,
Почему бы вам просто не сбросить это до 0?

.container {
    padding: 0px;
}