CSS 引导程序导航左推/右推
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18145697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap nav push-left / push-right
提问by no0ne
I need to have one part of my horizontal menu/navigation floating left, and other floating right.
我需要让我的水平菜单/导航的一部分向左浮动，另一部分向右浮动。
Like this:
Option1_Option2____Option3_Option4_____________Option5_Option6
像这样：
Option1_Option2 ____Option3_Option4_ ___ ___ ___ ___Option5_Option6
I am using this technique:
我正在使用这种技术：
<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>
but since the floats are (has to be)!importantI am having problems when the menu collapses on smaller (tablet/mobile) screen sizes.
It ends up being like this:
但是由于浮动是（必须是）!important当菜单在较小（平板电脑/移动设备）屏幕尺寸上折叠时我遇到了问题。
它最终是这样的：
Option1
Option2
Option3
Option4
Option5
Option6
选项1
选项2
选项3
选项4
选项5
选项6
As you can see the two last needs to be floated to the left, so I have tried changing the .pull-right {float: right !important;}to .pull-right {float: left !important;}in the @mediaqueries but no luck... I am stuck. Is there any way to over-ride!importantin the @media queries, or any other way to address this issue?
正如您所看到的，最后两个需要向左浮动，所以我尝试将查询中的.pull-right {float: right !important;}to更改为但没有运气......我被卡住了。有什么办法可以在@media 查询中超越，或者有任何其他方式来解决这个问题？.pull-right {float: left !important;}@media!important
采纳答案by Schmalzy
Are you wrapping your uls in a <div class="nav-collapse collapse">? your code seems to work just fine for me. See here -> jsFiddle
你把你的uls包裹在 a 中<div class="nav-collapse collapse">吗？你的代码对我来说似乎很好用。看这里 -> jsFiddle
If you watch the computed styles of the .pull-rightulwhen collapsing the nav-bar you can see bootstrap changes the floatfrom rightto none.
如果您.pull-rightul在折叠导航栏时查看 的计算样式，您可以看到引导程序将floatfrom更改right为none。
This it directly from bootstrap.css....
这直接来自 bootstrap.css....
@media (max-width: 979px)
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
I am betting you have some conflicting CSS that is messing it up. Remove any custom .pull-rightCSS you have, or any custom CSS for the entire navbar...
我敢打赌你有一些冲突的 CSS 把它搞砸了。删除.pull-right您拥有的任何自定义CSS，或整个导航栏的任何自定义 CSS...
