当使用引导3和
Desandro’s 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被调用，collg-4的宽度就会跳到360px，我相信这是从3列布局到2列布局的原因。
解决方法
答案在这里进一步讨论和解决：
https://github.com/desandro/masonry/issues/405
