如何在一个超大屏幕中并排排列两个按钮

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真的很容易掌握！