2

我最近开始使用 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>
4

3 回答 3

3

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

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

于 2013-10-09T05:34:20.400 回答
1

您已将弹出窗口包含在

.main2 {
  overflow: hidden;
}

毫不奇怪，弹出窗口在其外部不可见。删除它overflow:hidden;，它会工作。

于 2013-10-09T05:30:08.857 回答
0

您的 main2 的 CSS： 

.main2 {
   background-color: #FFFFFF;
   margin-left: auto;
   margin-right: auto;
}

此处的overflow: hidden;属性已被删除，允许其内部的元素也延伸到 main2 的边界。

于 2013-10-09T05:35:45.407 回答