Problema in Chrome con colonne Bootstrap 3 quando si utilizza Jquery Isotope (ma bene in Safari!)

Question

Ho passato giorni a cercare di risolvere questo problema e sono alla fine. Se qualcuno ha qualche intuizione, sarei molto, molto grato.

Sto lavorando su un sito e utilizzo sia Bootstrap 3 che Jquery Isotope. Sto usando la griglia di Bootstrap 3 per organizzare i div in quattro colonne. Tutto va bene finché non applico il filtro Isotopo ai div. Dopo averlo fatto, in Chrome, diventa un layout a tre colonne con un enorme spazio sul lato destro. Sembra che i div abbiano la stessa larghezza, si rompono dopo tre invece di quattro. La cosa esasperante è che tutto sembra funzionare bene in Safari!

Ecco un'illustrazione della differenza. Safari (corretto):

Chrome (errato):

Ho provato di tutto, e la "soluzione" unica che ho trovato è quello di cambiare il padding-left e padding-proprio sulla. contenitore div contenente gli elementi di Isotopo a 0. Non voglio farlo, tuttavia, poiché in seguito altri div. contenenti isotopi non si allineeranno correttamente.

Apprezzerei davvero molto l'aiuto che potresti dare! Io davvero non riesco a capire questo fuori ... Ho creato un Jsfiddle base per illustrare:

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

Ecco l'HTML di base:

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

Ecco lo script Isotope:

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

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

</script> 

Answer 1

stava avendo lo stesso identico problema in un progetto che sto attualmente lavorando. Solo con .col-sm-3, mentre 2 o 4 funzionerebbero bene. Strano.

In ogni caso, ciò che ha fatto per me era semplicemente aggiungendo il seguente CSS come un override sul file CSS Bootstrap:

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

Cheers!