javascript - Twitter Bootstrap 导航下拉菜单未扩展到 div 之外

Question

我最近开始使用 twitter bootstrap。发现它相当直观。 但我遇到了一个问题，导航下拉菜单不会扩展到容器 div 之外。

这是 jsfiddle http://jsfiddle.net/BwpaX/1/

如何使下拉菜单扩展到包含 div 之外？

这是我正在使用的 HTML。

  <div class="main2">
  <div class="navbar">  
  <div class="navbar-inner">  
  <div class="container">  
     <ul class="nav">  
       <li class="active">  
         <a class="brand" href="#">example</a> 
       </li>    
      </ul>  
    <ul class="nav pull-right">  
       <li class="dropdown">  
         <a href="#"  class="dropdown-toggle menu_col" data-toggle="dropdown"> Tags 
            <b class="caret"></b>  
          </a>  
         <ul class="dropdown-menu">  
          <li><a href="#">Share</a></li> 
          <li><a href="#">Tagged</a></li> 
          <li><a href="#">Explore</a></li>  
          <li><a href="#">Enjoy</a></li>  
         </ul>  
        </li>  
      </ul>
      </div>
      </div>  
      </div>
    <div class="searchbar_analytics">
    <form class="navbar-search pull-right">  
    <i class="icon-search" style="margin-right:3px;"></i><input type="text" class="search-query" placeholder="Search"/>  
    </form>

     </div>
     </div>

Answer 1

有几点需要注意。您应该使用 Bootstrap 的 CSS 类。正如 c-smile 提到的，您的 main2 类需要删除 overflow:hidden 。

我还建议将 container 类添加到 search_analytics div 和主 div 中。这是一个 fiddle http://jsfiddle.net/BwpaX/2/