如何在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中正確對齊工具欄？

回答

相關問題