ブートストラップ3 Navbar - モバイル固有のビュー

Question

私はブートストラップ3を使用するHTMLページを持っています。そのページには、navbarがあります。私のnavbarは少し異なります。セレクタ、ブランド、アクションの3つのセクションに分かれています。デスクトップでは、次のようになります。

+------------------------+--------+------------------------+ 
| Day of Week v   | My App | docs help welcome v | 
+------------------------+--------+------------------------+ 

これは以下のコードで正しく機能しています。そのコードはこのBootplyに示されています。私の挑戦は、私はモバイルで何か違うものを求めています。ユーザーはハンバーガーメニューをクリックしたときに、私はハンバーガーメニューで次の項目を表示したい、そして、

+------------------------+--------+------------------------+ 
| My App     |  |   docs help = | 
+------------------------+--------+------------------------+ 

：

+----------------------------+ 
| Day of Week v    | 
| 
| welcome     | 
| Your Info     | 
| Logout      | 
+----------------------------+ 

しばらくこのページを携帯で閲覧した場合、私はそれはとしてレンダリングしたいです機能は同じですが、レンダリングは全く異なります。私は望むモバイルビューを得る方法がわかりません。この時点で、私はそれが本当に私が困惑持って

<nav class="navbar navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <div style="position: absolute; width: 100%; left: 0; text-align: center; margin: auto;"> 
     <a href="/">My App</a> 
     </div> 

     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle banner-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Day of Week<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Sunday</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 

    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">docs</a></li> 
     <li><a href="#">help</a></li> 
     <li> 
      <a href="#" class="dropdown-toggle banner-username-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Welcome <span class="caret"></span></a> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#" class="banner-dropdown-link">Your Info</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#" class="banner-dropdown-link">Logout</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

（Bootply）次のことを試してみました。

Answer 1

これを試してみてください：

<nav class="navbar navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 

     <div class="logo-center navbar-brand"> 
     <a href="/">My App</a> 
     </div> 
     <ul class="list-inline visible-xs navmenu-mobile" style=""> 
     <li><a href="#">docs</a></li> 
     <li><a href="#">help</a></li> 
     </ul> 
    </div> 

    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle banner-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Day of Week<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Sunday</a></li> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="hidden-xs"><a href="#">docs</a></li> 
     <li class="hidden-xs"><a href="#">help</a></li> 
     <li> 
      <a href="#" class="dropdown-toggle banner-username-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Welcome <span class="caret"></span></a> 
      <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#" class="banner-dropdown-link">Your Info</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#" class="banner-dropdown-link">Logout</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

はCSS：

.navmenu-mobile { 
    position: absolute; 
    right: 80px; 
    top: 15px; 
    text-align: center; 
} 

@media (min-width: 768px) { 
    .logo-center { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    text-align: center; 
    margin: auto; 
    } 
} 

私はそれはあなた

役に立てば幸い CODEPEN

HTMLで

チェックデモ

Answer 2

これは役立つかもしれませんが、単なる考えです。

はあなた <head>タグに

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

このコード行を追加してくださいましたか私はそれが私が取り組んだいくつかのプロジェクトでモバイルビューの期待を妨げる可能性があることを発見しました。