jquery masonry - Albañilería con Bootstrap 3

masonry bootstrap 4

Question

Cuando utilizo bootstrap 3 y Desandro''s Masonry , me estoy quedando atascado en un problema extraño en el que parece que una vez que se llama a Masonry, se agregan 10px adicionales al ancho de mis imágenes, lo que hace que la mampostería pase de las 3 columnas deseadas a 2 (pero sigue funcionando correctamente en 2). Mi mejor conjetura es que esto debe tener algo que ver con la nueva clase .img-responsive de Bootstrap.

El problema se puede ver aquí: http://jsfiddle.net/68qxE/2/ (solo asegúrese de ampliar el ancho del resultado), pero si lo prefiere:

Aquí está mi 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>

Aquí está mi Javascript:

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

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

Y aquí está mi CSS:

.img-thumbnail {
  padding: 10px;
}

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

Ahora, cuando la página se carga originalmente, y antes de que tenga lugar cualquiera de los javascript, el ancho de col-lg-4 es de 350 px. Pero tan pronto como se llama el javascript, el ancho del col-lg-4 salta a 360px, lo que creo es lo que está causando que esto pase de un diseño de 3 columnas a un diseño de 2 columnas.

Answer 1

La respuesta se discutió y resolvió más detalladamente aquí: https://github.com/desandro/masonry/issues/405

Answer 2

No creo que sea causada por imágenes cargadas. El problema es que hay un relleno en .container .
¿Por qué no simplemente restableces eso a 0?

.container {
    padding: 0px;
}