2016-09-22 11 views
0

で全幅ドロップダウンエリアを取得するあなたは私がメニューを実行するために助けてくださいでした:どのようにすべてのメニュー項目のコンテナ

like this

私はその

`http://jsfiddle.net/KyleMit/6cu8f43m/` 

のようなリンクを見つけたが、それコンテナのメニュー項目を持つ全幅navbarを取得しません

+0

これまでに試したことを追加してください。 – sahil

+0

フィディボックスへのリンクを追加するのではなく、[編集]ボタンを使用して質問にコードを追加してください。 –

答えて

0

そのコードでは、フル幅のサブメニュー項目の詳細も述べました。

すべてのli項目で全幅を選択します。以下のように:

<li class="dropdown full-width"> 
       <a href="#" class="dropdown-toggle" 
       data-toggle="dropdown"> 
        Fill Width <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long 
         </a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
0

.full-width.dropdown { 
 
    position: static; 
 
} 
 
.full-width.dropdown > .dropdown-menu { 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 
.full-width.dropdown > .dropdown-menu > li > a { 
 
    white-space: normal; 
 
} 
 

 

 
.fill-width.dropdown { 
 
    position: static; 
 
} 
 
.fill-width.dropdown > .dropdown-menu { 
 
    left: auto; 
 
    position: absolute; 
 
} 
 
.fill-width.dropdown > .dropdown-menu > li > a { 
 
    white-space: normal; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
 
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="navbar navbar-inverse"> 
 

 
     <!-- Header --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" 
 
        data-toggle="collapse" 
 
        data-target=".navbar-collapse"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#"> 
 
       Bootstrap 3 Skeleton 
 
      </a> 
 
     </div> 
 
     <!-- Navbar Links --> 
 
     <div class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="dropdown full-width"> 
 
        <a href="#" class="dropdown-toggle" 
 
        data-toggle="dropdown"> 
 
         Normal <span class="caret"></span> 
 
        </a> 
 
        <ul class="dropdown-menu " role="menu"> 
 
         <li><a href="#">Action</a></li> 
 
         <li><a href="#">Another action</a></li> 
 
         <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long 
 
          </a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">Separated link</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">One more separated link</a></li> 
 
        </ul> 
 
       </li> 
 
       <li class="dropdown full-width"> 
 
        <a href="#" class="dropdown-toggle" 
 
        data-toggle="dropdown"> 
 
         Full Width <span class="caret"></span> 
 
        </a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Action</a></li> 
 
         <li><a href="#">Another action</a></li> 
 
         <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long 
 
          </a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">Separated link</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">One more separated link</a></li> 
 
        </ul> 
 
       </li>   
 
       <li class="dropdown full-width"> 
 
        <a href="#" class="dropdown-toggle" 
 
        data-toggle="dropdown"> 
 
         Fill Width <span class="caret"></span> 
 
        </a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Action</a></li> 
 
         <li><a href="#">Another action</a></li> 
 
         <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long 
 
          </a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">Separated link</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">One more separated link</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 

 

 

 

 

 
<!-- Post Info --> 
 
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> 
 
    About this SO Question: 
 
    <a href='http://stackoverflow.com/q/26147186/1366033'> 
 
     How To Restrict Width of Bootstrap 3 Dropdown Menu 
 
    </a><br/> 
 
    Fork This Skeleton Here: 
 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'> 
 
     Bootstrap 3 Skeleton 
 
    </a><br/> 
 
</div>
以下 Here

スニペットの例この

JFiddleデモを試してみてください

0

最も外側のdivのクラスをcontainerではなくnavbarに変更するだけです。 また、最も外側の代わりに<nav> </nav>を使用してください。<div class="container"> </div>

関連する問題