Sezione team - problema di allineamento bootstrap

Question

Sto riscontrando un problema di layout con il mio sito Web (fatto con bootstrap 3) Per qualche motivo l'allineamento delle immagini è disordinato (vedi foto sotto) Qualche idea di cosa non funziona?

Quello che mi piacerebbe:

Quello che ho:

  <section id="team"> 
       <div class="row"> 
       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/male-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Fondateur 
        <br>Directeur Général</p> 
       </div> 
       </div> 

       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/female-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Responsable diétéaires</p> 
       </div> 
       </div> 


       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/female-employee.png)"> 
        </div> 
        <p class="name">John Smithr</p> 
        <p class="position">Responsable dfsf, maux</p> 
       </div> 
       </div> 
      </div> 
      <div class="row"> 

       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/male-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Responsable stome</p> 
       </div> 
       </div> 


       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/female-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Responsable Facturation</p> 
       </div> 
       </div> 
       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/male-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Technicien</p> 
       </div> 
       </div> 
      </div> 

<div class="row"> 
       <div class="col-xs-2 col-sm-4 col-md-offset-2"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/female-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Accueil Clients et Secrétariat</p> 
       </div> 
       </div> 

       <div class="col-xs-2 col-sm-4"> 
       <div class="team-member"> 
        <div class="image" style="background-image:url(../images/female-employee.png)"> 
        </div> 
        <p class="name">John Smith</p> 
        <p class="position">Responsable administrative et assistante de Direction</p> 
       </div> 
       </div> 
</div>    

      </section> 

Answer 1

Dopo ogni 3th div è possibile aggiungere questa linea per risolvere il problema altezza:

<div class="clearfix hidden-xs"></div>

Spiegazione:

Il problema è stato verificato avendo div con differenti altezze. Poiché nel bootstrap tutte le classi col-* sono flottanti, è necessario avere una sorta di clearfixing in casi simili per evitare disallineamenti. In questo caso particolare, il clearfix non dovrebbe essere applicato a schermi extra piccoli perché in questo caso ci sono 6 colonne in fila invece di 3, quindi è per questo che ho usato la classe hidden-xs.

Answer 2

è necessario aggiungere più rows nei vostri div. In questo momento il codice non riconosce correttamente le tue colonne nel codice perché non ha nessun posto dove metterle. Vorrei modificare il tuo codice per te ma sono sul mio telefono.

Provare a inserire un row prima del primo membro e terminare la riga dopo l'ultimo membro della riga e così via. Spero che sia d'aiuto.