Bootstrap 3 Navbar - Специфичный для мобильных устройств

Question

У меня есть HTML-страница, которая использует Bootstrap 3. На этой странице у меня есть navbar. Мой навигатор немного отличается. Он разделен на три раздела: селектор, бренд и действия. На рабочем столе это выглядит так:

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

Это верно работает с кодом ниже. Этот код показан в этом Bootply. Моя задача: я хочу что-то другое на Mobile. Когда эта страница просматривается на мобильном телефоне, я хочу это визуализируется как:

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

Затем, когда пользователь нажимает кнопку меню гамбургер, я хочу показать следующее меню гамбургер:

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

While функции одинаковы, рендеринг полностью отличается. Я не уверен, как получить мой мобильный вид. На данный момент, я попробовал следующее (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> тега? Я обнаружил, что это может помешать ожиданиям мобильного просмотра в некоторых проектах, над которыми я работал.