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>

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

这是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>
(...)

如何制作响应正确的导航栏图标？

1 个答案: