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

但是当我使用 chrome inspect 元素在移动模式下查看它时，它显示如下

我知道我放置了一个额外的 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>