用Bootstrap 3实现砖石布局

Question

当使用Bootstrap 3和Desandro的Masonry时，我遇到了一个奇怪的问题，似乎一旦调用了Masonry，我的图片宽度就会增加额外的10像素，导致砌体从期望的3列变成2列（但在2列中仍然正常工作）。我最好的猜测是这与Bootstrap的新 .img-responsive 类有关。

可以在这里看到问题：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，我相信这就是导致布局从3列变成2列的原因。

- bswinnerton

Answer 1

这个问题在这里得到了进一步讨论和解决：https://github.com/desandro/masonry/issues/405

- bswinnerton

Answer 2

我认为这并不是由于 imagesLoaded 引起的。问题在于 .container 上有一个内边距。
你为什么不将其重置为 0 呢？

.container {
    padding: 0px;
}

- david8401