Щебетать навигационной панели Bootstrap с раздельными кнопками

Question

Есть ли какой-либо (довольно простой) способ получить Twitter Bootstrap's navbar, заполненный split button dropdowns?

Я ищу какой-либо способ отделить так называемые основные кнопки из выпадающего меню, содержащего элементы, которые принадлежат к этой основной кнопки или каким-то образом связанные с ней.

Я пытался добавить два элемента NavBar в каждых из них - первый, содержащего только основной кнопки (с подписью и значком) и вторым, содержащим только выпадающий список (без заголовка и значка):

Но результат не очень приемлем. Главным образом потому, что:

• только одна часть (из двух притворяясь одной кнопкой) наведена с помощью мыши,
• есть визуальный желоб между так называемая основной кнопки и его фальшивый выпадающий списком,
• Bootstrap имеет некоторые маленькая ошибка (я думаю), которая заставляет его не навешивать всю область ниже стрелки вниз, когда в элементе отсутствует подпись и значок.

Есть ли другие варианты, возможности или обходные пути для решения этой проблемы? Или я слишком много ожидаю?

Answer 1

Font Awesome страница имеет точно, что я искал для, без необходимости добавлять дополнительный код или CSS.

Я возвращаюсь к кнопкам «Иконки» и «Пример», которые являются идеальными раскрывающимися списками расщепленных кнопок, т. Е. Его можно щелкнуть как одну кнопку, и вы можете открыть раскрывающийся список рядом с ним, не касаясь основной кнопки.

Однако это делается через отдельные элементы, что означает огромное пространство между главной кнопкой и стрелкой вниз.

Here is пример Bootply, который повторяет этот код и такое поведение.

Answer 2

Я не понимаю, почему вы хотите разделить основную кнопку от выпадающего списка. Это уже отдельные структуры (привязка классом группы кнопок). Я не вижу маленькую ошибку. О желобе .btn, .navbar .btn и .btn-navbar имеют разные правила css. Для зависания кнопки и выпадающий один раз добавить/удалить дополнительный класс CSS и добавить на MouseEnter и MouseLeave см: 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')});