Problem in Chrome mit Bootstrap 3 Spalten bei Verwendung von Jquery Isotope (aber gut in Safari!)

Question

Ich habe Tage damit verbracht zu versuchen, dies zu lösen, und ich bin am Ende meines Wissens. Wenn jemand eine Einsicht hat, wäre ich sehr, sehr dankbar.

Ich arbeite auf einer Website und beide Bootstrap 3 und Jquery Isotope verwenden. Ich verwende das Raster von Bootstrap 3, um Divs in vier Spalten anzuordnen. Alles ist in Ordnung, bis ich den Isotopenfilter auf die divs anwende. Danach wird es in Chrome zu einem dreispaltigen Layout mit einer großen Lücke auf der rechten Seite. Es scheint, als ob die Divs die gleiche Breite haben - sie brechen nur nach drei anstatt vier. Das Wahnsinnige ist, dass in Safari alles gut zu funktionieren scheint!

Hier ist eine Illustration des Unterschieds. Safari (richtig):

Chrome (falsch):

Ich habe alles versucht, und die einzige "Lösung" ich gefunden habe, ist das padding-left und padding-right auf das zu ändern. container div, das die Isotope-Elemente enthält. Ich möchte das jedoch nicht tun, da andere Isotope-enthaltende .container-divs dann nicht richtig ausgerichtet sind.

Ich würde wirklich, wirklich jede Hilfe schätzen, die Sie geben konnten! Ich kann wirklich nicht diesen herauszufinden ... Ich habe eine grundlegende Jsfiddle erstellt erläutern:

http://jsfiddle.net/kECqL/5/

Hier ist die grundlegende html:

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

Hier ist der Isotopen-Skript:

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

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

</script> 

Answer 1

hatte genau das gleiche Problem in einem Projekt, das ich gerade arbeite. Nur mit .col-sm-3, während 2 oder 4 würde gut funktionieren. Seltsam.

Wie auch immer, tat es das, was für mich einfach das folgende CSS als eine Überschreibung auf der Bootstrap CSS-Datei hinzufügen wurde:

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

Prost!