Bootstrap nav-stacked右側下拉框

Question

我正在使用twitter-bootstrap界面，該界面有一個用於導航的側欄，因此導航堆疊。我也想使用一些標籤中的下拉菜單。我發現下拉菜單在所有其他菜單項之上下拉不佳。我想讓下拉菜單下拉到側欄的側面，這樣您仍然可以看到其他側欄項目。我看着拉右，但我不認爲這就是我正在尋找。

不管怎麼說，這裏是我到目前爲止有：

  <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

所以，你想不充當就像一個下拉菜單下拉菜單:)這是很容易做到，在這裏你的工作示例在「新鮮」 Twitter的引導

<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設置爲200px。