引导导航左推/右推答案

【问题标题】：bootstrap nav push-left / push-right引导导航左推/右推
【发布时间】：2013-08-09 22:38:36
【问题描述】：

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

像这样：
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

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

【问题讨论】：

您的媒体查询是在单独的样式表中还是您正在编辑引导 css？
您应该为此只使用一个<ul>，并将pull-right 类添加到您想要向右浮动的每个<li>
编辑引导 css..
谢谢 Bojangles，但没有什么真正改变。折叠菜单也有同样的问题。

标签： css twitter-bootstrap css-float alignment

【解决方案1】：

您是否将 uls 包装在 <div class="nav-collapse collapse"> 中？你的代码对我来说似乎工作得很好。看这里->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...

【讨论】：

我的 macbook 已经是第 7 年了，有时会做一些奇怪的事情。我尝试了一切都没有成功，所以最后我不得不从头开始...删除所有内容，重新启动计算机并重新下载 BS.. 现在它似乎可以工作了。
你忘了几个括号 @media (max-width: 979px) { .navbar .nav-collapse .nav.pull-right { float: none;左边距：0； } }