html – 团队部分 – 引导程序对齐问题

发布时间：2020-12-14 23:28:28 所属栏目：资源来源：网络整理

导读：我的网站遇到布局问题(使用bootstrap 3完成) 由于某种原因,图片对齐很混乱(见下图) 知道什么是错的吗？我想要的是什么：是)我有的： section id="team" div class="row" div class="col-xs-2 col-sm-4" div class="team-member" div class="image" style="

我的网站遇到布局问题(使用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>

解决方法

在每个第3个div之后,您可以添加此行来修复您的身高问题：

< div class =“clearfix hidden-xs”>< / div>

说明：

这个问题是由于div具有不同的高度而发生的.由于在引导程序中所有col- *类都是浮动的,因此需要在类似情况下进行某种清除修复以避免错位.在这种特殊情况下,clearfix不应该应用于超小屏幕,因为在这种情况下,连续有6个col而不是3个,所以这就是我使用hidden-xs类的原因.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!