Html 团队部分-引导校准问题

我的网站遇到布局问题（使用bootstrap 3完成） 由于某些原因，图片对齐混乱（请参见下图） 你知道怎么了吗

我想要的是：

我所拥有的：

约翰·史密斯

Fondateur

Général董事
约翰·史密斯

负责人
约翰·史密斯

负责的dfsf，maux

约翰·史密斯

负责的stome
约翰·史密斯

负责的制作
约翰·史密斯

Technicien
约翰·史密斯

Accueil客户和秘书
约翰·史密斯

负责的行政和辅助指导

您需要在div中添加更多的

行。现在代码无法正确识别代码中的列，因为它没有任何地方可以放置它们。我会帮你编辑你的代码，但我在打电话

尝试将
行
放在第一个成员之前，将结束行放在行的最后一个成员之后，依此类推。希望能有帮助
 在每个第三个div之后，您可以添加此行来解决您的身高问题：


说明：

问题是由不同高度的div引起的。因为在引导过程中，所有的
col-*
类都是浮动的，所以在类似的情况下，需要有一些ClearFixed，以避免未对齐。在这种特殊情况下，clearfix不应应用于额外的小屏幕，因为在这种情况下，一行中有6列而不是3列，所以这就是我使用
隐藏xs
类的原因。
这里是我为此创建的一个适当的沙盒，您可能希望将其添加到您的问题中……；）也许值得一看？AFAIK网格通常更多地用于站点的基础布局（边栏等）。谢谢。但是由于我使用col-xs-6 col-sm-4，我应该在第二个成员或第三个成员之后的哪里关闭行？Thanks@Greg在第三次之后（我不是OP，只是跟着这个问题）很好！它只需添加一次，就解决了问题：）。。。你能提供一些解释吗？我在bootply中为此创建了一个测试用例，然后我应用了你的解决方案，这里是：-如果你喜欢使用它…谢谢sc3w！它与col-sm-4配合使用效果很好（每行按预期返回3张图片），但是对于col-xs-6 col-sm-4，当在xs屏幕上查看时，第一行有2张图片，第二行有1张图片，第三行有2张图片，第四行有1张图片，等等。有没有办法在xs屏幕上有2张图片，2张图片，2张图片？（我猜这与第三张图片后的清晰修复相冲突）。Thanks@Greg在这种情况下，请在第二列之后添加
，并在第三列之后继续使用
。谢谢您的帮助！
            <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>