Masonry with Bootstrap 3

Question

When using bootstrap 3 and Desandro's Masonry, I'm getting stuck on a weird issue in which it seems that once Masonry is called, an extra 10px is added to the width of my images, causing the masonry to go from a desired 3 columns to 2 (but still working properly in 2). My best guess is that this must have something to do with Bootstrap's new .img-responsive class.

The issue can be seen here: http://jsfiddle.net/68qxE/2/ (just be sure to expand the width of the result), but if you'd prefer:

Here is my 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>

Here is my Javascript:

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

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

And here is my CSS:

.img-thumbnail {
  padding: 10px;
}

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

Now when the page is originally loaded, and before any of the javascript takes place, the width of col-lg-4's are 350px. But as soon as the javascript is called, the width of the col-lg-4's jumps up to 360px, which I believe is what's causing this to go from a 3-column layout down to a 2-column layout.

Answer 1

The answer was further discussed and solved here: https://github.com/desandro/masonry/issues/405