Bootstrap右侧导航栏移动渲染问题

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