Каменная кладка с Bootstrap 3

Question

При использовании bootstrap 3 и Desandro's Masonry я застрял в странной проблеме, в которой кажется, что после вызова масонства добавляется дополнительная 10px к ширине моих изображений, что приводит к тому, что каменная кладка идет от желаемых 3 столбцов до 2 (но все еще правильно работает в 2). Мое лучшее предположение заключается в том, что это должно иметь какое-то отношение к новому классу Bootim.

Проблему можно увидеть здесь: 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 составляет 350 пикселей. Но как только вызывается javascript, ширина col-lg-4 перескакивает до 360 пикселей, и я считаю, что это приводит к тому, что это происходит от трехколоночного макета до двухколоночного макета.

Answer 1

Ответ был также обсужден и решен здесь: https://github.com/desandro/masonry/issues/405

Answer 2

Я не думаю, что это вызвано образами изображений. Проблема в том, что есть дополнение на .container.
Почему бы вам просто не сбросить это значение на 0?

.container { 
    padding: 0px; 
}