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>标签？我发现这可能会阻碍我对一些项目的移动视图的期望。