twitter-bootstrap Twitter Bootstrap 3：右对齐折叠导航问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18892581/
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
Twitter Bootstrap 3: right aligned collapsing nav issue
提问by Leon
Using Twitter Bootstrap 3.
使用 Twitter Bootstrap 3。
I have a fixed navbar with the menu items aligned to the right by adding .pull-right to the ul inside the navbar-collapse div.
通过将 .pull-right 添加到导航栏折叠 div 内的 ul，我有一个固定的导航栏，菜单项与右侧对齐。
When the nav collapses on small screens and you click to open it, the nav items are not 100% width as they should be, but about 30% and pulled to the right.
当导航在小屏幕上折叠并单击将其打开时，导航项目的宽度不是应有的 100%，而是大约 30% 并被拉到右侧。
Have fixed this with:
已经解决了这个问题：
@media (max-width: 767px) {
.navbar-nav.pull-right { float: none!important; }
}
But wondering if there is a better way to do it.
但是想知道是否有更好的方法来做到这一点。
Code for the navbar is:
导航栏的代码是：
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="application/assets/img/main-logo.png" alt="">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#about">Menu 2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 3 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 4 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#about">Menu 5</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
回答by Leon
I read the manual!!
我看了说明书！！
Need to use .navbar-right instead of .pull-right which has the media query already built in to bootstrap.
需要使用 .navbar-right 而不是 .pull-right ，它已经内置了媒体查询来引导。
