Jquery Isotopeを使用しているときにBootstrap 3列のChromeで問題が発生する（Safariでも問題ありません）

Question

私はこの問題を解決するために何時間も過ごしました。誰かが洞察力を持っているなら、私は非常に、非常に感謝しています。

私はサイトで作業しており、Bootstrap 3とJquery Isotopeの両方を使用しています。私はブートストラップ3のグリッドを使って4列にdivを配置しています。 divにアイソトープフィルタを適用するまではすべて問題ありません。それをやった後、Chromeでは3列レイアウトになり、右側に大きなギャップがあります。 divsは同じ幅を維持しているように見えます.4つではなく3つ後に分割されます。狂ったことは、すべてSafariでうまくいくようです！

ここにその違いを示します。サファリ（正しい）：

クローム（間違った）：

私はすべてを試してみました、そして、私が発見した唯一の「溶液」のパディング左とパディング右を変更することです。しかし、他のアイソトープを含む.container divsが正しく整列しないため、これをやりたくありません。

私は本当に、あなたが与えることができる任意のヘルプに感謝します！

：ここ

<div class="container"> 
    <div class="row iso"> 
     <div class="col-sm-3 iso-item" style="padding-bottom: 20px;"> 
      <div style="background-color: green;"> 
       <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p> 
      </div> 
     </div> 
    </div> 
</div> 

は、同位体のスクリプトです：ここで http://jsfiddle.net/kECqL/5/

は、基本的なhtmlです：私は本当にこの1を把握することはできません...私が説明するために、基本的なJsfiddleを作成しました

<script type="text/javascript"> 
var $container = $('.iso'); 

$container.imagesLoaded(function(){ 
    $container.isotope({ 
    // options... 
    itemSelector : '.iso-item', 
    layoutMode : 'masonry' 
    }); 
}); 

</script> 

Answer 1

は、私が現在取り組んでいるプロジェクトで全く同じ問題を抱えていました。 .col-sm-3のみで、2または4は正常に動作します。奇妙な。とにかく

、どのような私のためにそれをやったことは、単にブートストラップCSSファイルのオーバーライドとして、以下のCSSを追加しました：

.col-sm-3 { 
    margin-right: -1px; 
} 

乾杯を！