對齊引導程序列

Question

在我的網站（團隊部分）上，我有類似6x的內容：

      <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>

問題是，我不知道如何將最后兩個對齊到包的中間，如下圖所示。

我該如何實現？

非常感謝，

Answer 1

這是一個bootply ： http : //www.bootply.com/oTea5I7wZX

在具有偏移列的最后一行：

        <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;
}