web-dev-qa-db-ja.com

Bootstrap 3の石積み

bootstrap 3 and Desandro's Masonry を使用すると、Masonryが呼び出されると、余分な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に跳ね上がり、これが3列レイアウトから2列レイアウトに移行する原因だと考えています。

jquery-masonrytwitter-bootstrap-3
16
bswinnerton

答えはここでさらに議論され解決されました： https://github.com/desandro/masonry/issues/405

9
bswinnerton

ImagesLoadedによるものではないと思います。問題は、.containerにパディングがあることです。
なぜそれを0にリセットしないのですか？

.container {
    padding: 0px;
}
3
david8401