Twitter 스플릿 버튼이있는 부트 스트랩의 탐색 바

Question

는으로 채워져 있습니다 (Twitter Bootstrap's navbar).

내가 분리 할 수있는 방법을 찾고 있어요 그래서 기본 버튼을에 속하거나 어떻게 든 관련된 항목을 포함하는 드롭 다운 메뉴에서 기본 버튼을했다.

I는 각 당 두 메뉴 바 항목을 추가하려고 시도 - 제 만 주 (캡션 아이콘) 버튼 및 함유 제 (캡션 아이콘없이) 만 드롭 함유 :

을

그러나 결과는별로 받아 들일 수 없습니다. 주로하기 때문에 (두 하나 개의 버튼을 척의)

• 한 부분은
• 부트 스트랩 몇 가지를 가지고,
• 는 소위 주요 버튼와 가짜 드롭 다운 사이에 시각적 인 홈통이, 마우스로 가리킬 항목에 캡션 및 아이콘이없는 경우 아래쪽 화살표 아래쪽 전체 영역을 가리 키지 않는 작은 버그 (제 생각에는).

이 문제에 대한 다른 옵션, 가능성 또는 해결책이 있습니까? 아니면 너무 많이 기대하고 있습니까?

Answer 1

Font Awesome 페이지가 정확히 있습니다 는 .btn-위험 클래스 모든 버튼/드롭 다운을 가져가 추가 코드 나 CSS를 넣지 않아도됩니다.

"아이콘"과 "예제"버튼이 완벽한 분할 버튼 드롭 다운, 즉 단일 버튼으로 클릭 될 수 있으며 기본 버튼을 터치하지 않고 옆에있는 드롭 다운을 열 수 있습니다.

그러나 이것은 별도의 요소를 통해 이루어 지므로 주 버튼과 드롭 다운 화살표 사이에 큰 공간이 있습니다.

Here is이 코드와이 동작을 복제하는 Bootply 예제입니다.

Answer 2

메인 버튼을 드롭 다운에서 분리하려는 이유를 알 수 없습니다. 이미 별도의 구조입니다 (버튼 그룹 클래스로 바인딩). 나는 작은 벌레가 보이지 않는다. 도랑에 관하여 .btn, .navbar .btn 및 .btn-navbar에는 다른 CSS 규칙이 있습니다. .btn - 위험 버튼 호버에 대한 http://bootply.com/66352

별도의 CSS 규칙 :

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

을 버튼을 유혹하고 드롭 다운 번/추가 여분의 CSS 클래스를 제거하고 mouseenter와하는 MouseLeave에 추가을 참조 내가 무엇을 찾고 있었어요,

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