Bootstrap中的列對齊

Question

我需要三張圖像放在第一行，兩張圖像放在第二行，如下圖所示。

我給上述圖像代碼如下，

<div class="row" style="margin-left:15%"> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a Graduate</p> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a Post Graduate</p> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a PhD Guy</p> 
     </div> 
    </div> 
    <br> 
    <div class="row" style="margin-left:20%"> 
     <div class="col-xs-6 col-md-3" style="margin-left:20%"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">I'm a Course taking one</p> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
       <img src="F:\Project P\img\logo_homework.png" alt="Engg"> 
      </a> 
      <p style="text-align:center">Others</p> 
     </div> 
    </div> 

但是，當我使用鉻檢查元件時，顯示爲以下

我在移動模式下觀看它知道我已經放置了額外的div，但是如果我沒有放置div，則第四張圖像將放置在第一行。

如何讓它們對齊。

Answer 1

也許試試這個：

https://jsfiddle.net/68kycb4g/

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div> 
<div class="row"> 
    <div class="col-xs-6 col-sm-offset-1 col-sm-5"></div> 
    <div class="col-xs-6 col-sm-5"></div> 
</div>