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

当你有几个按钮的工具栏和下拉，like this one：如何在Bootstrap中正确对齐工具栏？

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

你如何正确对齐是正确的？我尝试了工具栏上的拉右以及按钮组以及包含所有按钮的右拉按钮组。这些工作都没有。

来源

2015-04-15 Pablo

希望拉右的工作https://jsfiddle.net/9uym374g/2/ ..你想要的其他东西？ –

“拉右”类应该解决您的问题。 – Dorvalla

是的，你是对的，在工具栏级别右键拉工作。我不确定是什么让它失败。可能我从来没有在同一时间尝试每个按钮的拉右和一个按钮组（因为每个按钮的整个按钮组感觉很傻）。 – Pablo

你可以简单地添加类“右拉式”到.btn，工具栏，或在你的CSS文件，只是给你的工具栏浮动右键属性，像这样：

.btn-toolbar { 
 
    float: right; 
 
    }

来源

2015-04-15 09:29:41 IustiNN

这本身不起作用。它将使您的工具栏完全浮动到右侧，更改其预期属性。在任何情况下，您都可以将“float：right”应用于工具栏中的按钮，覆盖“float：left”属性，使它们左移。 –

你是对的:) – IustiNN

你可以编辑你的答案来包含这个，这样有人来找我们找到正确的答案。 –

尝试这样的：DEMO

<div class="container"> 
    <div class="btn-toolbar pull-right" role="toolbar"> 
..... 
</div></div>

引导pull-right在这里工作正常。

来源

2015-04-15 10:27:42

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

回答

相关问题