如何在Bootstrap中正确对齐工具栏？

Question

当你有一个带有几个按钮和下拉列表的工具栏时,就像这样:

<div class="container">
    <div class="btn-toolbar" role="toolbar">
        <div class="btn-group"><a class="btn btn-default" role="button" href="">Invite People</a></div>
        <div class="btn-group"><a class="btn btn-default" role="button" href="">Create Campaign</a></div>
        <div class="btn-group"><a class="btn btn-default" role="button" href="">Edit</a></div>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
</div>

你如何正确对齐它？我尝试在工具栏上按下右键以及按钮组以及一个包含所有按钮的右侧按钮组.这些都没有奏效.

Answer 1

试试这样:DEMO

<div class="container">
    <div class="btn-toolbar pull-right" role="toolbar">
.....
</div></div>

Bootstrap pull-right在这里运行正常.

Answer 2

您可以简单地将“pull-right”类添加到 .btn-toolbar，或者在您的 css 文件中，只需为工具栏提供 float right 属性，如下所示：

.btn-toolbar {
  float: right;
  }