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

Question

我想在左侧保留一些图标，在右侧保留一些图标，所以我这样做了

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

但问题是在移动 View 中，右侧图标正在下降并保持在右侧按钮并且所有导航栏尺寸都增加了。是否有可能在大屏幕中将导航栏保持在右侧但在小屏幕中全部图标会下来

这是 bootply

Answer 1

使用 CSS Media Queries您可以创建自己的类并使用它来代替向右拉

@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>
(...)