如何在bootstrap中有一個導航欄拆分按鈕下拉組件？

我使用bootstrap（v2），我從http://twitter.github.com/bootstrap/components.html#dropdowns可以看到「分割按鈕下拉菜單」。如何在bootstrap中有一個導航欄拆分按鈕下拉組件？

在導航欄，你可以有下拉菜單

然而，它並不像您可以在導航欄的分裂下拉。我想要使用它的是登錄用戶的名字旁邊有脫字符號。點擊用戶名可以進入用戶頁面，但插入符號會顯示一個下拉菜單，並顯示「退出」等操作。

這可能嗎？

來源

2012-12-07 MrPurpleStreak

這就是我的意思。頂部欄中的插入符號和按鈕是分開的，在最下面的一箇中，我使用「正常」按鈕。 http://jsfiddle.net/musmuris/R3JKz/10/ 這些看起來都不錯正確 – MrPurpleStreak

可能的重複[導航欄3的導航欄拆分按鈕下拉]（http://stackoverflow.com/questions/20539329/ navbar-split-button-dropdown-with-bootstrap-3） – Matyas

我不明白一年後問的問題可以重複嗎？不過，我已經編輯指出，這是在4年前問的時候bootstrap v2！ – MrPurpleStreak

我修改了你的jsfiddle來做我想要的。將脫字符號放在自己的列表項中會在插入符號和用戶名之間創建一個尷尬的空間。克服這個將需要一些覆蓋。編輯：作爲一個簡單的例子，我使用了兩個類去除兩個元素之間的填充。儘管我不得不使用!important屬性，但這不是最佳實踐。 http://jsfiddle.net/R3JKz/15/

<li> 
<a href="#" class="caret-before"> 
    someuser 
</a> 
</li> 
<li class="dropdown">  
<a class="dropdown-toggle caret-after" data-toggle="dropdown"> 
    <b class="caret"></b> 
</a> 
    ... 
</li>

中還包含的jsfiddle是如何使用B標籤作爲觸發的例子，而是因爲它打破了佈局此方法不會在引導導航欄工作。例如：

<li class="dropdown"> 
<a href="#" class="pull-left"> 
    A Dropdown Menu 
</a> 
<b class="caret pull-left dropdown-toggle" data-toggle="dropdown"> 
</b>

我希望這有幫助，不要猶豫，要求澄清。

來源

2012-12-07 18:21:47 eziegl

謝謝。是的 - 這就是我想要的。我會得出關於填充的相同結論，並嘗試了相同的結論。問題在於，當鼠標懸停在位時，脫字符不會改變顏色 - 可能需要一些JS來修復它。我希望bootstrap會有這個內置的，我只是錯過了它。好吧。再次感謝。 – MrPurpleStreak

這有一個主要缺點：在小屏幕上，插入符號將顯示爲自己的菜單項目，而不是「綁定」到用戶項目。 – Fabian

如何在bootstrap中有一個導航欄拆分按鈕下拉組件？

回答

相關問題