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

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

3 个答案: