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

Question

我有一个问题想通过导航栏的右侧来解决。

2) 在手机上查看导航时。如何让“登录 | 联系”右侧导航栏显示在 Logo 下方？我希望它显示在第二行，在 Logo 下方左对齐。

这是我的 Boot : 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;  
    }
   }

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