Html Bootstrap 3 导航栏右边距不应该是 -15px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20429229/
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 3 navigation bar right margin is not supposed to be -15px
提问by Igor Filippov
In my web page I have a Bootstrap 3 navbar:
在我的网页中，我有一个 Bootstrap 3 导航栏：
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Teachlab</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</div>
</nav>
<div class="container">
<%= yield %>
</div>
</body>
The problem is that navigation is to close to the edge of the screen. If I remove navbar-fixed-topfrom the navigation bar, it's working as I want.
问题是导航要靠近屏幕边缘。如果我从导航栏中删除navbar-fixed-top，它会按我的意愿工作。
Any hints?
任何提示？
回答by Christina
Use .container-fluid as of 3.1.1.
从 3.1.1 开始使用 .container-fluid。
The structure is not correct. .navbar-right goes on the .collapse container not on the ul.
结构不正确。.navbar-right 在 .collapse 容器上而不是在 ul 上。
SAMPLE: http://jsbin.com/eQIROsE/2/edit
示例：http: //jsbin.com/eQIROsE/2/edit
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
回答by Igor Filippov
I ended up with overriding following:
我最终覆盖了以下内容：
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
But maybe there's another solution?
但也许还有另一种解决方案？
回答by Kolyunya
回答by Shivek Parmar
The solution to this could be
解决这个问题的方法可能是
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
It worked for me.
它对我有用。
回答by Kepro
I really can't see why you'd have two .navbar-nav.navbar-right. Just wrap the navs in .navbar-right instead.
我真的不明白为什么你会有两个 .navbar-nav.navbar-right。只需将导航包裹在 .navbar-right 中即可。
<div class="navbar-right">
<ul class="nav navbar-nav">...</ul>
<ul class="nav navbar-nav">...</ul>
</div>
回答by Jean-Luc
I got exactly the same issue today!
According to Bootstrap doc <ul class="nav navbar-nav navbar-right">is correct.
我今天遇到了完全相同的问题！根据 Bootstrap 文档<ul class="nav navbar-nav navbar-right">是正确的。
Like you, I solved the problem by setting the nav navbar-nav navbar-right margin-right to 0px without noticing unwanted effects.
和你一样，我通过将 nav navbar-nav navbar-right margin-right 设置为 0px 解决了这个问题，而没有注意到不需要的效果。
Notice that the margin-right value of .navbar-text.navbar-right:last-child is 0px while .navbar-nav.navbar-right:last-child margin-right value is -15px... Bizarre?
注意.navbar-text.navbar-right:last-child的 margin-right 值为0px 而.navbar-nav.navbar-right:last-child margin-right 的值为 -15px ……奇怪吗？
回答by Totoro53
My not so elegant solution, but does the job very quickly, add a last list item;
我的解决方案不是那么优雅，但很快就能完成工作，添加最后一个列表项；
<li><span> </span></li>
回答by gutkol
If you have problem with
如果你有问题
margin-right: -15px;
边距右：-15px；
in .navbar-right then just add in your css styles
在 .navbar-right 然后添加你的 css 样式
.navbar-right {
margin-right: 0px;
}
and if this still doesn't work clear your browser from all history when your webstie was running and debug it again. It works :)
如果这仍然不起作用，请在您的 webstie 运行时从所有历史记录中清除您的浏览器并再次调试它。有用 ：）
