3

我需要让我的水平菜单/导航的一部分向左浮动，而另一部分向右浮动。

像这样：
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;}为但没有运气......我被卡住了。有什么方法可以覆盖@media 查询，或者有其他方法可以解决这个问题吗？.pull-right {float: left !important;}@media!important

4

1 回答 1

3

您是否将 s 包裹在uls 中<div class="nav-collapse collapse">？你的代码对我来说似乎工作得很好。见这里-> jsFiddle

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

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

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

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

于 2013-08-09T13:50:42.733 回答