Twitter BootStrap TopBar 및 DropDown 메뉴

Question

왼쪽과 오른쪽에 몇 가지 링크가있는 상단 바를 만들려고하는데 DropDown의 로그인 양식을 여는 로그인 링크가 있습니다. (드롭 다운이 열려있을 때 또는) 나는 또한 클릭하면 로그인 양식을 선택한 탭처럼 행동해야합니다

내 코드는 다음과 같습니다 : - 나는이있어

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Section1</a></li> 
      <li><a href="#">Section2</a></li> 
     </ul> 

     <ul class="nav nav-tabs pull-right signin-menu"> 
      <li class="dropdown" data-dropdown="dropdown"><a href="#" data-toggle="dropdown" class="login-link dropdown-toggle">Login</a> 
       <ul class="dropdown-menu" id="signin-dropdown"> 
        <li> 
         <form>....</form> 
        </li> 
       </ul> 
      </li> 
     </ul>   
    </div> 
</div> 

목록, 그 중 하나는 오른쪽에 탭처럼 행동하고 싶었습니다. 내 문제는 드롭 다운이 열려있을 때 로그인 링크를 가리키는 작은 화살표를 제거 할 수 없다는 것입니다. 화살표 아래에 드롭 다운이있는 선택된 탭처럼 보이게하고 싶습니다.

또한 탭을 선택하면 둥근 모서리가 느슨해집니다. CSS 문제 일지 모르지만 어디에서 찾을 지 확신 할 수 없습니다 ..

아이디어가 있으십니까?

P. 나는 BootStrap v2.0.1을 사용 중입니다.

Answer 1

화살표는 의사 요소를 사용하여 부트 스트랩에 의해 추가되었으므로 추가 한 고유 한 클래스를 대상으로 코드의 "로그인"부분에서 해당 기능을 무효화 할 수 있습니다. 다른 메뉴 요소에는 영향을주지 않는 기본 동작. 이 방법은 또한 아무렇지도 않은 부트 스트랩 업데이트를 만듭니다.

당신과 같이 해당 의사 클래스에 display:none을 추가하여 로그인 상자에있는 드롭 다운 화살표를 제거 할 수 있습니다

.signin-menu .dropdown-menu:before { 
    display: none; 
} 

.signin-menu .dropdown-menu:after { 
    display: none; 
} 

빠른 Demo, edit 여기

CSS.