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

Question

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

<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。

Answer 2

已更新HTML

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div id ="b"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" id="right" class="btn btn-default as-btn-text as-refresh-btn">X</button>
             </div>
</div>

已更新CSS：

#b{
    width:100%;   
}
#right{
    float:right;
}

工作示例：http://jsfiddle.net/tmurmvnx/

Answer 3

在bootstrap4中你可以使用strong textclass，检查这个简单的例子：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="btn-group btn-group-lg float-right" role="group">
   <button type="submit" class="btn btn-dark">
   Btn 1
   </button>
   <button type="submit" class="btn btn-primary">
   Btn 2
   </button>
</div>

有关详细信息，请查看此文档：

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

Trouble pulling button in btn-group to right

html

css

twitter-bootstrap

twitter-bootstrap-3