Portofolio bootstrap - spazio griglia vuoto

Question

Ho problemi con la griglia nella griglia di bootstrap. Ho spazi vuoti di fila. questo è mostrato su desktop e su cellulare è come .

Il codice che sto usando è

<div class="row"> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book1.png" alt=""> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book2.png" alt=""> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book3.png" alt=""> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book4.png" alt=""> 
      </a> 
     </div> 

     <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="image/book image/book4.png" alt=""> 
      </a> 
     </div> 
     </div> 

Io in realtà non so come ho potuto risolvere che, quindi spero che qualcuno mi può dare qualche consiglio.

Answer 1

Ciò è dovuto a diverse altezze delle immersioni. Hai alcune possibili correzioni:

1. Impostare manualmente tutti i div a uguali livelli.

2. Utilizzare qualcosa come https://github.com/liabru/jquery-match-height per impostare le altezze di div per voi. Ci sono diverse impostazioni che puoi usare come su una riga per riga.

3. Utilizzare le reti flessibili. Purtroppo FlexBox non è ampiamente disponibile ancora

4. utilizzare una miscela di FlexBox con JavaScript come questo http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Answer 2

È necessario impostare min-height per le colonne in quanto le colonne hanno altezze diverse.

.portfolio-item { 
min-height: 200px; 
} 

Change 200px per un minimo che si adatterebbe le colonne nei rispettivi luoghi.

Answer 3

assicurati che tutte le immagini dei libri abbiano le stesse dimensioni ... o imposta semplicemente l'altezza minima nella classe "portfolio-item".

Answer 4

Basta aggiungere classe clearfix dopo ogni riga