टीम अनुभाग - बूटस्ट्रैप संरेखण समस्या

Question

मुझे अपनी वेबसाइट (बूटस्ट्रैप 3 का उपयोग करके किया गया) के साथ एक लेआउट समस्या का सामना करना पड़ रहा है किसी कारण से चित्र संरेखण गन्दा है (नीचे चित्र देखें) कोई विचार गलत क्या है?

मैं चाहता क्या:

मैं क्या है:

  <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

प्रत्येक 3th div के बाद आप अपनी ऊंचाई मुद्दे को ठीक करने के लिए इस लाइन जोड़ सकते हैं:

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

स्पष्टीकरण:

मुद्दा अलग-अलग ऊंचाइयों के साथ divs होने से हुई किया गया था। चूंकि बूटस्ट्रैप में सभी col-* कक्षाएं चलती हैं, इसलिए गलत मामलों से बचने के लिए इसी तरह के मामलों में कुछ प्रकार की स्पष्टता की आवश्यकता होती है। इस विशेष मामले में स्पष्ट छोटी सी स्क्रीन पर स्पष्ट रूप से लागू नहीं किया जाना चाहिए क्योंकि उस मामले में 3 की बजाय पंक्ति में 6 कॉल हैं, इसलिए मैंने hidden-xs कक्षा का उपयोग किया है।

Answer 2

आप अपने divs में अधिक rows जोड़ने की जरूरत है। अभी कोड कोड में आपके कॉलम को ठीक से पहचान नहीं रहा है क्योंकि इसमें उन्हें कहीं भी नहीं रखा गया है। मैं आपके लिए अपना कोड संपादित करूंगा लेकिन मैं अपने फोन पर हूं।

पहले सदस्य से पहले row डालने का प्रयास करें और पंक्ति के अंतिम सदस्य के बाद पंक्ति समाप्त करें और इसी तरह। आशा करता हूँ की ये काम करेगा।