引导正确的导航栏中移动设备显示问题

问题描述：

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/[email protected]" 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>

答

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

一定要更正媒体查询语法...

答

创建一个媒体查询更改显示内联同时在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;}

把它放在媒体查询内部以及

答

添加以下代码：

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

引导正确的导航栏中移动设备显示问题

相关推荐