ブートストラップnavbarハンバーガーメニュー - 2列テーブル

Question

私は3つのオプションとドロップダウンメニューを持つブートストラップnavbarsetupを持っています。これはすべて私のブラウザ（下のコード）で非常にうまく動作します

私がしたいのは、ドロップダウン）を表示します。

これはブートストラップ/ CSSで可能ですか、それとも効果的に2つのメニューを作成する必要がありますか？ここで

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';

<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-left" href="/home/"><span class="logo"></span></a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style=""> 
 
     <ul class="nav navbar-nav navbar-right"> 
 

 
     <li class=""> 
 
      <a href="/opt1/">Option 1</a> 
 
     </li> 
 
     <li class=""> 
 
      <a href="/opt2/">Option 2</a> 
 
     </li> 
 
     <li class=""> 
 
      <a href="/opt3/">Option 3</a> 
 
     </li> 
 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More...<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li class=""> 
 
       <a href="/drop1/">Dropdown 1</a> 
 
      </li> 
 
      <li class=""> 
 
       <a href="/drop2r/">Dropdown 2</a> 
 
      </li> 
 
      <li class=""> 
 
       <a href="/drop3/">Dropdown 3</a> 
 
      </li> 
 
      <li class=""> 
 
       <a href="/drop4/">Dropdown 4</a> 
 
      </li> 
 

 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav>

Answer 1

あなたが行く：http://www.bootply.com/twaM4o0sej

は、あなたはそれがクリックで開くことが原因とスタイルをオーバーライドし、代わりにデフォルトでそれが開いている必要があります。モバイル用に「もっと」というリンクが表示されないようにする必要もありました。ちょうど詰め物を調整するとあなたは良いです。

CSS：

@media only screen and (max-width:768px){ 
    .dropdown-menu{ 
     display: block; 
     position: static; 
     background-color:transparent; 
     border:0 none; 
     box-shadow:none; 
     margin-top:0; 
     position:static; 
     width:100%; 
    } 

HTML：

<li class="dropdown"><a href="#" class="dropdown-toggle hidden-xs" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More...<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li class=""> 
          <a href="/drop1/">Dropdown 1</a> 
         </li> 
         <li class=""> 
          <a href="/drop2r/">Dropdown 2</a> 
         </li> 
         <li class=""> 
          <a href="/drop3/">Dropdown 3</a> 
         </li> 
         <li class=""> 
          <a href="/drop4/">Dropdown 4</a> 
         </li> 

        </ul> 
       </li>