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> tag是一个块元素，这意味着它将占用它的容器的整个宽度，下一个元素将位于下面。将按钮放在相同的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很容易掌握！

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

2 个答案: