css - 无法将 btn-group 中的按钮向右拉

Question

我有以下显示一些按钮的代码:

Fiddle

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li><a href="#">A</a>
            </li>
            <li><a href="#">B</a>
            </li>
        </ul>
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
    </div>
</div>

我想把“X”拉到组的最右边。我试过 .pull-right、float:right 但似乎都不起作用。

任何想法表示赞赏!

Answer 1

我会将关闭(“X”)按钮放在它自己的 .button-group 中并将该组拉到右边:

        <!-- previous button location -->
    </div><!-- close the existing group -->
    <div class="button-group pull-right">
        <!-- new button location -->
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn">X</button>
    </div>
</div><!-- end .btn-toolbar -->

Here's an update到你的 fiddle 。

这种方法的优点是您可以根据 .button-group 规则获得正确的按钮舍入，并且您不需要更改或覆盖现有的 Bootstrap 框架 CSS。