html - 团队部分 - Bootstrap 对齐问题

Question

我的网站出现布局问题(使用 bootstrap 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

在每个第 3 个 div 之后，您可以添加此行来解决您的高度问题:

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

解释:

问题是由于 div 具有不同的高度而发生的。由于在 Bootstrap 中所有 col-*类是 float 的，在类似情况下需要进行某种清除修复以避免错位。在这种特殊情况下，clearfix 不应应用于超小屏幕，因为在这种情况下，一行中有 6 列而不是 3 列，所以这就是我使用 hidden-xs 的原因。类。