web-dev-qa-db-fra.com

Maçonnerie avec Bootstrap 3

Lorsque j'utilise bootstrap 3 and Desandro's Masonry , je suis coincé sur un problème étrange dans lequel il semble qu'une fois la maçonnerie appelée, un supplément de 10px est ajouté à la largeur de mes images, faisant passer la maçonnerie des 3 colonnes souhaitées à 2 (mais fonctionnant toujours correctement en 2). Ma meilleure supposition est que cela doit avoir quelque chose à voir avec la nouvelle classe .img-responsive de Bootstrap.

Le problème peut être vu ici: http://jsfiddle.net/68qxE/2/ (assurez-vous simplement d'étendre la largeur du résultat), mais si vous préférez:

Voici mon 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>

Voici mon Javascript:

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

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

Et voici mon CSS:

.img-thumbnail {
  padding: 10px;
}

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

Maintenant, lorsque la page est chargée à l'origine et avant que le javascript n'ait lieu, la largeur des col-lg-4 est de 350 pixels. Mais dès que le javascript est appelé, la largeur du col-lg-4 monte à 360 pixels, ce qui, je crois, est à l'origine de ce passage d'une disposition à 3 colonnes à une disposition à 2 colonnes.

jquery-masonrytwitter-bootstrap-3
16
bswinnerton

La réponse a été discutée plus avant et résolue ici: https://github.com/desandro/masonry/issues/405

9
bswinnerton

Je ne pense pas que cela soit causé par imagesLoaded. Le problème est qu'il y a un rembourrage sur .container.
Pourquoi ne remettez-vous pas simplement cela à 0?

.container {
    padding: 0px;
}
3
david8401