Bootstrap right nav bar Проблемы с мобильным рендерингом

Question

У меня есть проблемы, которые я пытаюсь решить с правой стороны моего навигационного бара.

2) При просмотре навигатора на мобильном телефоне. Как я могу получить правую навигационную панель «Вход в систему», которая будет отображаться под логотипом? Я бы хотел, чтобы он отображался на 2-й строке, выровненной слева от логотипа.

Вот мой bootply: http://www.bootply.com/waaBbWFaI1

Вот мой HTML:

<!-- Navigation --> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container topnav"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-brand"> 
      <img class="img-responsive" src="https://www.artstation.com/assets/logo@2x-20dd909e895e83cd81b0f224ac66f10f.png" alt="Art"> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Login</a></li> 
       <li><a>|</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    <!-- /.container --> 
</nav> 

Answer 1

.navbar-nav > li > a { 
    padding-top: 14px; 
    padding-left: 0px; 
    line-height: 15px; 
    float: left; 
    } 

попробовать этот CSS при ширине медиа запросов и высоты требуется LIKE:

@media and screen (min-width:xyz and max-width: xyz) { 
     .navbar-nav > li > a { 
    padding-top: 14px; 
    padding-left: 0px; 
    line-height: 15px; 
    float: left; 
    } 
    } 

быть обязательно исправить синтаксис запроса СМИ ...

Answer 2

Создание медиа-запрос, чтобы изменить отображение встраивать на обоих li и a

@media (max-width:767px) { 
    .nav>li { 
     position: relative; 
     display: inline; 
    } 
    .navbar-default .navbar-nav>li>a { 
     color: #777; 
     display: inline; 
    } 
} 

, а затем дать ему Логин | Контакт Ссылки некоторые margin-top также:

.nav navbar-nav navbar-right { margin-top:20px;} 

Поместите его в запросе СМИ, а также

Answer 3

Добавьте этот код:

@media screen and (min-width: 320px) and (max-width: 768px) { 
    .navbar-nav { clear: both; float: left; } 
    .navbar-nav > li{display: inline-block; } 
}