对齐引导列

Question

在我的网站（团队部分）上我有类似这样的东西：

      <div class="row">
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url(../images/female-employee.png)">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>

问题在于我不知道如何将最后2个对齐到包的中间，如下图所示。

我怎样才能做到这一点？

非常感谢，

Answer 1

以下是bootply：http://www.bootply.com/oTea5I7wZX

在offseting columns的最后一行：

        <div class="row">

            <div class="col-xs-6 col-md-4 col-md-offset-2">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>

            <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>
          </div>          
</div>

完整HTML

      <div class="container">
        <div class="row">
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      <div class="col-xs-6 col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
      </div>
      </div>

        <div class="row">

            <div class="col-xs-6 col-md-4 col-md-offset-2">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>

            <div class="col-xs-6  col-md-4">
        <div class="team-member">
          <div class="image" style="background-image:url('//placehold.it/150x150')">
          </div>
          <p class="name">Jane Doe</p>
          <p class="position">Sells</p>
        </div>
          </div>
          </div>          
</div>

Answer 2

您可以将flex-box用于最后一行，如下所示：

<div class='row'>
   <div class="team-member align-center">
      <div class="image" style="background-image:url(../images/female-employee.png)">
      </div>
      <p class="name">Jane Doe</p>
      <p class="position">Sells</p>
    </div>
    <div class="team-member align-center">
      <div class="image" style="background-image:url(../images/female-employee.png)">
      </div>
      <p class="name">Jane Doe</p>
      <p class="position">Sells</p>
    </div>
</div>

并添加课程align-center，如下所示：

.align-center {
  display: flex;
  justify-content: space-around;
}