如何制作响应式右侧导航栏图标？

Question

如何制作响应式右侧导航栏图标？

3

我想让一些图标在左边，另一些图标在右边，所以我就这样做了。

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
       <li><a href="#">Link</a></li>
       <li><a href="#">More</a></li>
       <li><a href="#">Options</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
       <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Options</a></li>

    </ul>
</div>

但问题在于，在移动视图中，右侧的图标会下移并保留在右下角，整个导航栏大小也会增加。是否有可能在大屏幕上将导航栏保持在右侧，但在小屏幕上所有图标都会下移？这是bootply的示例代码。

- rocking

@codingguru 我没有使用jQuery Mobile。 - rocking

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FabioG · Answer 1

使用 CSS 媒体查询，您可以创建自己的类并将其用于替代 pull-right。

@media (max-width: 500px) {
   .your_class {
       float: left;
   }
}

@media (min-width: 501px) {
   .your_class {
      float: right;
   }
}

然后只需使用您的类

(...)
<ul class="nav navbar-nav your_class">
   <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Options</a></li>

</ul>
(...)