如何在一個超大屏幕中並排排列兩個按鈕

Question

我是Bootstrap 3.0的初學者，我真的無法弄清楚如何將jumbotrons中的兩個按鈕並排排列。

我有這個代碼，但它只是將按鈕堆疊在一起：

<p>
    <a href = "#" class = "btn btn-default">See more</a>
</p>
<p>
    <a href = "#" class = "btn btn-primary">
        Martlet: Faces Edition
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</p>

Answer 1

默認情況下， HTML <p>標簽是一個塊元素，這意味着它將占據其容器的整個寬度，下一個元素將位於其下方。 將按鈕放在同一個p標簽內以解決此問題：

<p>
    <a href = "#" class = "btn btn-default">See more</a>
    <a href = "#" class = "btn btn-primary">
        Martlet: Faces Edition
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</p>

Answer 2

如果您希望它正確對齊，您可以利用網格布局。

<div class="row">
    <div class="col-sm-6 text-left">
        <a href = "#" class = "btn btn-default">See more</a>
    </div>
    <div class="col-sm-6 text-right">
        <a href = "#" class = "btn btn-primary">
            Martlet: Faces Edition
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

這將允許2個按鈕並排放置。 然后在移動/平板電腦視圖中疊加在一起。 請注意@DavidG提出的建議也是如此！ 給自己一點時間，Bootstrap真的很容易掌握！