如何使用bootstrap 3.0正确对齐元素？

Question

我需要将元素放在页面的右侧。

这个元素：

在页面右侧。像这样：

我发现只有pull-right辅助类，但我一直在意识到，它对我没有帮助，因为它基于float。所以我开始研究，谷歌的第一个结果是this result。它说，我应该使用pull-right。好吧，我试过......

我试过了：

<a href="#" class="btn btn-default btn-lg pull-right" role="button"><span class="glyphicon glyphicon-plus"></span> Создать заказ</span></a>

我得到了这个明显的结果：

您可以看到上排的第三个heading被取代。

那么我需要做什么才能使用bootstrap api正确对齐任何元素？

我理解，我可以搜索how to center/left/right div，我会找到一些有效的结果，但它会是不是 bootstrap解决方案。

Answer 1

我认为您的答案是＆＃34; .pull-right＆＃34; 类。你可以看一下 Bootstrap 3 Documentation Helper Classes 。我认为你可以使用2种方法。

1）对于业余爱好者：

<div class="col-sm-8"></div> /*Empty div for left alignment*/
<div class="col-sm-4"><div class="btn btn-default">Your Text on Button</div></div> /*This is your button*/

在此代码之后，您可以使用标题。我的意思是你的按钮，你的标题必须彼此分开。

但正如我所说，这对你来说真是可怕。我认为响应式设计会出现一些问题。

2）这适用于专业Bootstrappers

<div class="col-xs-12"><div class="btn btn-default pull-right>Your Button Text</div></div>

在此代码之后，您可以使用标题。我的意思是你的按钮和你的标题必须相互分开。你应该注意＆＃34; .pull-right＆＃34; 类。你只需在正确的地方使用它。

我认为这对你有用！

也许你想看看它：How can I get my Twitter Bootstrap buttons to right align?