부트 스트랩 드롭 다운 메뉴 삼각형의 수수께끼는 무엇입니까?

Question

Twitter 탐색 스트랩 드롭 다운 메뉴가 탐색 표시 줄에 포함될 때와 그렇지 않을 때의 차이점을 이해하려고합니다.

탐색 표시 줄에 포함 된 경우 확장 메뉴에 약간의 삼각형/화살표가 표시됩니다.

http://twitter.github.com/bootstrap/javascript.html#dropdowns

가 난 그냥 CSS/HTML을 탐험 두 시간 동안, 난 아직도 ... 왜

어떤 생각을 이해하지 않습니다 : 아무 네비게이션 바는 사용하지 않을 때이 삼각형은 보여되지 않는 이유는 무엇입니까?

Answer 1

nav 요소 내부에는 두 가지 스타일이 드롭 다운 메뉴에 적용됩니다. 그들은 서로 한 밝은 회색, 다른 어두운 회색의 상단에 두 개의 삼각형을 만들

.navbar .nav > li > .dropdown-menu::before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #CCC; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 
.navbar .nav > li > .dropdown-menu::after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid white; 
    border-left: 6px solid transparent; 
    content: ''; 
    } 

다음과 같이 그들은있다. 크롬 개발자 도구를 사용하는 경우 이러한 요소를 검사하고 다양한 스타일을 해제하여 수행중인 작업에 대한 느낌을 얻을 수 있습니다. 이 스타일은 네비게이션 바없이 적용되지 않습니다

Answer 2

삼각형은 다음 구문에 의해 생성 될 수

:

<b class="caret dropdown-toggle"></b> 

Answer 3

은 그냥 CSS에 이것을 추가하고 내부의 드롭 다운을주지 않고 드롭 다운 메뉴 화살표를 사용할 수 있습니다 탐색 모음

.dropdown-menu:before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #CCC; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 

.dropdown-menu:after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid white; 
    border-left: 6px solid transparent; 
    content: ''; 
    } 

.dropdown-menu:before, .dropdown-menu.pull-right:before { 
right: 12px; 
left: auto; 
} 

.dropdown-menu::after, .dropdown-menu.pull-right:after { 
right: 13px; 
left: auto; 
}