当你有一个带有几个按钮和一个下拉菜单的工具栏时,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>
字符串
如何正确对齐呢?我试过工具栏上的pull-right,按钮组,以及一个包含所有按钮的pull-right按钮组。
3条答案
按热度按时间vkc1a9a21#
像这样尝试:DEMO
字符串
Bootstrap
pull-right
在这里工作正常。wvt8vs2t2#
在Bootstrap 5.3.2中,我使用
justify-content-end
,因为上面的其他建议都不起作用。示例:https://jsfiddle.net/chdaL9k0/1/
ycggw6v23#
你可以简单地将类'pull-right'添加到.btn-toolbar中,或者在你的css文件中,给予你的工具栏float right属性,如下所示:
字符串