Question

我最近开始使用twitter bootstrap。找到它相当直观。但是我遇到了问题，导航下拉列表不会扩展到容器div之外。

如何让下拉列表延伸到包含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中。这是一个小提琴http://jsfiddle.net/BwpaX/2/

Answer 2

您已将弹出窗口添加到

中

.main2 {
  overflow: hidden;
}

毫不奇怪弹出窗口不会在它外面可见。删除overflow:hidden;，它将起作用。

Answer 3

你的main2的CSS：

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

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

Twitter引导程序导航下拉列表未扩展到div之外

3 个答案: