Bootstrap 3 Navbar - 移動特定視圖

Question

我有一個使用Bootstrap 3的HTML頁面。在那個頁面中，我有一個導航欄。我的導航欄稍有不同。它分爲三個部分：選擇器，品牌和操作。在桌面上，它看起來像這樣：

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

這可以正確使用下面的代碼。該代碼顯示在Bootply中。我的挑戰是，我希望Mobile上有某種不同的東西。當這個頁面上移動觀看，我希望它呈現爲：

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

然後，當用戶點擊漢堡包菜單，我想表明在漢堡菜單如下：

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

雖然功能相同，渲染完全不同。我不知道如何獲得我想要的移動視圖。在這一點上，我已經試過以下（Bootply）

<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> 

這真的讓我感到困惑。

Answer 1

試試這個：

檢查演示在CODEPEN

HTML：

<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; 
    } 
} 

我希望它能幫助你

Answer 2

這可能或不會幫助，但它只是一個想法。

請問您有一定

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

這行代碼添加到您的<head>標籤？我發現這可能會阻礙我對一些項目的移動視圖的期望。