Team section - bootstrap alignment issue

Question

Web sitemde yazı düzeni sorunu yaşıyorum (bootstrap 3 kullanılarak) Herhangi bir nedenle resimler hizalanmış durumda (bkz. Aşağıdaki resimler) Sorun nedir? İsterdim Ne

:

Ben Ne:

  <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

her 3th div sonra boy sorununu gidermek için bu satırı ekleyebilirsiniz:

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

Açıklama:

konu değişik yüksekliklerde div'leri alarak meydana gelmiştir. Önyükleme sırasında tüm col-* sınıfları yüzdüğünden, yanlış hizalamadan kaçınmak için benzer durumlarda bir çeşit düzeltme yapılması gerekir. Bu özel durumda, clearfix ekstra küçük ekranlara uygulanmamalıdır, çünkü bu durumda 3 satır yerine 6 cols vardır, bu yüzden bu yüzden hidden-xs sınıfını kullanmıştım.

Answer 2

Sen div 'ler içinde rows daha eklemek gerekir. Şu anda kod, kodlarınızı doğru bir şekilde kod içinde tanımamıştır çünkü bunları koymak için herhangi bir yere sahip değildir. Kodunu senin için düzenlerdim ama telefonumdayım.

Satırın son üyesi ve sonra ilk üye ve bitiş satırından önce row koymayı deneyin. Umarım yardımcı olur.