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具有不同的高度。由于在引导程序中所有col-*类都是浮动的，因此在类似情况下需要进行某种清除修复以避免错位。在这种特殊情况下，clearfix不应该应用于额外的小屏幕，因为在这种情况下，连续6个cols而不是3个，所以这就是我使用hidden-xs类的原因。

Answer 2

您需要在div中添加更多rows。现在代码没有正确识别代码中的列，因为它没有任何地方可以放置它们。我会为你编辑你的代码，但我在手机上。

尝试在行的最后一个成员之后的第一个成员和结束行之前放置row，依此类推。希望能帮助到你。

团队部分 - bootstrap对齐问题

2 个答案: