引導正確的導航欄中移動設備顯示問題

Question

我有我試圖用我的導航欄的右側解決的問題。

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要求，如：

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