Question

我需要将水平菜单/导航的一部分向左浮动，其他浮动向右浮动。

像这样：
的 Option1_Option2 ____ Option3_Option4_ _ __ _ __ _ __ _ __ Option5_Option6

我正在使用这种技术：

<ul class="nav navbar-nav pull-left">
  <li><a href="#">Option1</a></li>
  <li><a href="#">Option2</a></li>
  <li><a href="#">Option3</a></li>
  <li><a href="#">Option4</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
  <li><a href="#">Option5</a></li>
  <li><a href="#">Option6</a></li>
</ul>

但由于花车是（必须）!important我在菜单在较小（平板电脑/手机）屏幕尺寸上崩溃时遇到问题。
它最终会像这样：

选项1
选项2
选项3
选项4
选项5
选项6

正如您所看到的，最后两个需要浮动到左侧，所以我尝试在.pull-right {float: right !important;}查询中将.pull-right {float: left !important;}更改为@media，但没有运气......我我卡住了。有没有办法在@media查询中覆盖!important，或以其他任何方式解决此问题？

Answer 1

您是否将ul包裹在<div class="nav-collapse collapse">中？你的代码似乎对我来说很好。看到这里 - ＆gt; jsFiddle

如果您在折叠导航栏时观看.pull-right ul的计算样式，则可以看到引导程序将float从right更改为none

这直接来自bootstrap.css ....

@media (max-width: 979px)
  .navbar .nav-collapse .nav.pull-right {
      float: none;
      margin-left: 0;
   }

我打赌你有一些冲突的CSS搞砸了。删除您拥有的所有自定义.pull-right CSS或整个导航栏的任何自定义CSS ...

bootstrap nav push-left / push-right

1 个答案: