Question

当您有一个带有几个按钮和下拉列表的工具栏时，like this one：

<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

您只需添加课程＆＃39; pull-right＆＃39;到.btn-toolbar，或者在你的css文件中，只需给你的工具栏一个浮动权限属性，如下所示：

＆＃13;

.btn-toolbar {
  float: right;
  }

＆＃13;

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

2 个答案: