오른쪽으로 부트 스트랩 nav-stacked 드롭 다운

Question

내비게이션을위한 사이드 바가있는 twitter-bootstrap이있는 인터페이스에서 작업 중이므로 nav-stacked. 또한 일부 탭의 드롭 다운 메뉴를 사용하려고합니다. 나는 드롭 다운 메뉴가 다른 모든 메뉴 항목 위에 떨어지는 것은 우아하지 않다는 것을 알게되었습니다. 드롭 다운 메뉴를 사이드 바 옆으로 내려 놓으면 사이드 바 항목의 나머지 부분을 볼 수 있습니다. 나는 끌어 당기는 권리를 들여다 보았다. 그러나 나는 그것이 내가 찾고있는 것이라고 생각하지 않는다.

어쨌든

가, 여기에 내가 지금까지 무엇을 가지고 :

  <ul class="nav nav-tabs nav-stacked"> 
       <li class="{{home}}"> 
        <a href="/home/">Home</a></li> 

       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="/cars/">Cars<b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li class="{{1999s10}}"><a href="/cars/1999s10">1999 Electric S-10</a></li> 
         <li class="{{1965malibu}}"><a href="/cars/1965malibu">1965 Malibu</a></li> 
         <li class="{{1960hearse}}"><a href="/cars/1960hearse">1960 Hearse</a></li> 
         <li class="{{1966gto}}"><a href="/cars/1966gto">1966 GTO</a></li> 
         <li class="{{1971blazer}}"><a href="/cars/1971blazer">1971 Bazer</a></li> 
         <!-- <li class="divider"></li> --> 
        </ul> 

       </li> 
      </ul> 

Answer 1

그래서 당신이 드롭 다운 메뉴처럼 행동하지 않는 드롭 다운 메뉴를 원하는 : 여기, 당신의 작업 예를 달성하기 매우 쉽다

<ul class="nav nav-tabs nav-stacked" style="width:200px;"> <!-- <<<< added styling --> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
    <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="/cars/">Cars<b class="caret"></b></a> 
     <ul class="dropdown-menu" style="margin-left:200px;margin-top:-38px;"> <!-- <<<< added styling --> 
      <li class="{{1999s10}}"><a href="/cars/1999s10">1999 Electric S-10</a></li> 
      <li class="{{1965malibu}}"><a href="/cars/1965malibu">1965 Malibu</a></li> 
      <li class="{{1960hearse}}"><a href="/cars/1960hearse">1960 Hearse</a></li> 
      <li class="{{1966gto}}"><a href="/cars/1966gto">1966 GTO</a></li> 
      <li class="{{1971blazer}}"><a href="/cars/1971blazer">1971 Bazer</a></li> 
     </ul> 
    </li> 
    <!-- dummy extra links --> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
    <li class="{{home}}"><a href="/home/">Home</a></li> 
</ul> 

그냥 스타일 dropdown-menu 부트 스트랩은 "신선한"트위터에 그래서 그것은 nav-tabs과 dropdown-toggle 요소 수직으로 떨어져 위치한다. 어떤 너비를 사용하고 있는지 알 수 없으므로 nav-tabs을 200 픽셀로 설정했습니다.