Bootstrap nav下拉方向

我正在使用Twitter Bootstrap構建佈局。我在導航欄中定位下拉菜單時遇到問題。如果.nav具有向右拉，那麼打開的下拉菜單將始終向左打開。Bootstrap nav下拉方向

我希望能夠手動控制它應該向左還是向右打開。這可能嗎？

<div class="navbar" id="navbar-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="logo pull-left" href="/index_dev.php/"></a> 
      <ul class="nav pull-right"> 
       <li class="active"><a href="/index_dev.php/"> Shots</a></li> 
       <li class="divider-vertical"></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Explore <i class="icon-caret-down"></i></a> 
        <ul class="dropdown-menu span6"> 
         <li class="column-menu span2"> 
          <ul> 
           <li><a href="#"><i class="icon-caret-right"></i> Dry Fly</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Popper</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Terrestrial</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Streamer</a></li> 
          </ul> 
         </li> 
         <li class="column-menu span2"> 
          <ul> 
           <li><a href="#"><i class="icon-caret-right"></i> Wet Fly</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Nymph</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Emerger</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Streamer</a></li> 
          </ul> 
         </li> 
         <li class="column-menu span2"> 
          <ul> 
           <li><a href="#"><i class="icon-caret-right"></i> Wet Fly</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Nymph</a></li> 
           <li><a href="#"><i class="icon-caret-right"></i> Emerger</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li class="divider-vertical"></li> 
           <li><a href="/index_dev.php/signup">Sign up</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="/index_dev.php/login">Sign in</a></li> 
          </ul> 
     </div> 
    </div> 
</div>

來源

2013-01-23 charliexx

你只需要重寫引導的.dropdown-menu.pull-right風格：

.navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right { 
    right: auto; 
    left: -19px; 
} 
.navbar .pull-right > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::before { 
    right: auto; 
    left: 9px; 
} 
.navbar .pull-right > li > .dropdown-menu::after, .navbar .nav > li > .dropdown-menu.pull-right.dropdown-right::after { 
    right: auto; 
    left: 10px; 
}

使用類dropdown-right你想覆蓋任何右鍵菜單拉。

jsFiddle

來源

2013-01-23 18:56:07 Sara

我不知道我明白所有這些規則的用途是什麼？在我的情況下，我只是添加了'.dropdown-menu.dropdown-right {left：inherit;右：0像素; }'它似乎工作正常，有或沒有'拉右'。 –

Bootstrap nav下拉方向

回答

相關問題