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

我会将关闭（＆＃34; X＆＃34;）按钮放在自己的.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给你的小提琴。

这种方法的优点是您可以根据.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

在引导程序4中，您可以使用 strong text 类，请查看以下简单示例：

<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中的按钮拉到右边

3 个答案: