Twitter Bootstrap的導航欄與拆分按鈕

有沒有（相當容易）的方式獲得Twitter Bootstrap's navbar充滿split button dropdowns？Twitter Bootstrap的導航欄與拆分按鈕

我正在尋找任何方式分開所謂含有項的下拉菜單屬於該主按鈕或以某種方式與之相關主按鈕。

我試圖每每一個添加兩個導航欄項 - 第一個僅含有主按鈕（具有字幕和圖標）和第二僅含有下拉（無字幕和圖標）：

enter image description here

但是結果並不太好。這主要是因爲：

只有一個（兩個假裝一個按鈕）部分懸停鼠標，
有所謂主按鈕及其假下拉之間的視覺天溝，
自舉有一些小蟲子（我認爲），導致它不會將整個區域懸停在箭頭下方，當某個項目缺少標題和圖標時。

是否有任何其他選項，可能性或變通方法解決此問題？還是我期待太多？

來源

2013-07-03 trejder

Font Awesome頁正好有，我一直在尋找因爲不需要額外的代碼或CSS。

我喜歡「圖標」和「示例」按鈕，它們是完美的分割按鈕下拉菜單，即它可以作爲單個按鈕單擊，並且可以在旁邊打開下拉菜單，而無需觸摸主按鈕。

但是，這是通過單獨的元素來完成的，這意味着主按鈕和下拉箭頭之間有巨大的空間。

Here is一個Bootply示例，它複製此代碼和此行爲。

來源

2013-07-04 13:29:49 trejder

感謝您指出Font Awesome的例子！我能夠通過在Font Awesome的額外類中添加零邊距來合理調整大小：'.navbar-nav> li.dropdown-split-left> a {0} {0} {0} {0} padding-right：0; margin-right：0; } .navbar-nav> li.dropdown-split-right> a { padding-left：7px; margin-left：0; }' –

太好了！你爲什麼不把它作爲一個全功能的答案？：> – trejder

我不明白你爲什麼想從下拉菜單中分離主按鈕。它已經是單獨的結構（通過按鈕組類綁定）。我沒有看到小錯誤。關於天溝.btn，.navbar .btn和.btn-navbar有不同的CSS規則。對於徘徊在按鈕和下拉一次添加/刪除多餘的CSS類，並添加此對了mouseenter和鼠標離開，請參閱：http://bootply.com/66352懸停

額外的CSS規則.btn-危險按鈕：

.buttonhover-danger 
{ 
    color: #ffffff; 
    background-color: #bd362f; 
    background-image: none; 
    *background-color: #a9302a; 
}

懸停所有按鈕/下拉菜單與.btn-危險級：

$('.btn-danger').mouseenter(function(){$('.btn-danger').addClass('buttonhover-danger')}); 
$('.btn-danger').mouseleave(function(){$('.btn-danger').removeClass('buttonhover-danger')});

來源

2013-07-03 13:23:08

謝謝，爲解決方案！你的問題的答案（「_Why split？_」）很明顯（至少對我來說）。我有一個媒體列表，主要訪問過的頁面，以及一些與媒體相關的操作（如添加，轉換，查看統計信息等），並不經常使用。我主要使用選項（媒體列表）通過直接點擊來訪問，而不常見的功能在下拉菜單中被隱藏。我不希望用戶點擊導航欄項目並從下拉列表中選擇「列表」，每次他們想要進入列表（非常經常使用的操作）。 – trejder

答案可能會更簡單：爲什麼要使用拆分按鈕下拉菜單？原因完全一樣，只有我想在導航欄中使用它。 – trejder

Twitter Bootstrap的導航欄與拆分按鈕

回答

相關問題