合わせブートストラップの列

Question

（チーム節）私はこの6倍のようなものがあります、

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

あなたは以下のように最後の行のためのフレックスボックスを使用することができます：あなたは `COL-MD-offset- *`クラスを使用することができます

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