드롭 다운 메뉴의 캐럿이있는 글리프 렌치

Question

선택할 수있는 멋진 드롭 다운 메뉴가있는 클릭 가능한 글리프콘 (렌치)을 만드는 방법을 아는 사람이 있습니까? 어떤 통찰력이 좋을까요! glyphicon 렌치

현재 코드 : 나는 캐럿을 클릭하면

<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
     <span class="glyphicon glyphicon-wrench"></span> 
     <b class="caret"></b> 
    </a> 

         <ul class="dropdown-menu"> 
         <li><a href="http://www.jquery2dotnet.com">Action</a></li> 
         <li><a href="http://www.jquery2dotnet.com">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
         </ul> 

, 나는 드롭 다운 메뉴를 얻을 수가 없습니다. 내가 여기서 뭔가 분명한 것을 놓치고 있니?

Answer 1

내가 여기에 분명한 것을 놓치고 있습니까?

당신은 absolute LY 위치 드롭 다운 메뉴 에 대한 새로운 용기 블럭을 설정하는 .dropdown 래퍼를 놓쳤다.

따라서 드롭 다운 메뉴는 초기 포함 블록에 상대적으로 배치됩니다. 다음과 같이은 <div> 갖는 .dropdown 클래스 요소를 감싸는 수 :

EXAMPLE HERE

<div class="dropdown"> 
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="glyphicon glyphicon-wrench"></span> 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
    <!-- items here... --> 
    </ul> 
</div> 

---

¹_{static 이외의 값을 갖는 position 속성 새로운 함유하는 블록을 설정한다. 트위터 부트 스트랩은 기본적으로 을 .dropdown에 적용합니다.}