2

最近、Twitter ブートストラップを使い始めました。それをかなり直感的に見つけます。しかし、ナビゲーション ドロップダウンがコンテナー 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 に答える
0

main2 の CSS: 

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

ここでは、overflow: hidden;属性が削除され、その中の要素も main2 の境界を越えて拡張されています。

于 2013-10-09T05:35:45.407 に答える