twitter-bootstrap 如何在 Bootstrap 3 中证明导航栏导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19073813/
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
How to justify navbar-nav in Bootstrap 3
提问by josh
I'm attempting to justify a navbar(make the navbar contents stretch) in Bootstrap 3. I've added margin: 0 auto; max-width: 1000px;to the nav*classes, and also attempted to add a containerelement as a parent to the ul. As a last check, I did what was suggested in this answerby adding navbar-justifiedto the navbarclass, but this caused everything to scrunch together on the left without justifying the entire navbar.
我试图navbar在 Bootstrap 3 中证明（使导航栏内容拉伸）是合理的。我已经添加margin: 0 auto; max-width: 1000px;到nav*类中，并且还尝试将一个container元素作为父元素添加到ul. 作为最后一次检查，我通过添加到类来执行此答案中的建议，但这导致所有内容都在左侧紧缩在一起，而没有证明整个导航栏的合理性。navbar-justifiednavbar
Doing a nav nav-justifieduldoes make the ulcenter, but it doesn't retain the styles of the navbar-navclass since it's not part of the ul, and it doesn't look great when the screen is smaller than 768px.
做 anav nav-justifiedul确实使ul中心，但它不保留navbar-nav类的样式，因为它不是 的一部分，ul当屏幕小于 768px 时它看起来不太好。
How do I justify a Bootstrap 3 navbar?
我如何证明 Bootstrap 3 的合理性navbar？
Edit: For those who are interested in a more complete answer, here is some code I use in production:
编辑：对于那些对更完整的答案感兴趣的人，这是我在生产中使用的一些代码：
// Stylesheet
.navbar-nav>li {
float: none;
}
// Navbar
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="group.html">Group</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="positions.html">Positions</a></li>
</ul>
</nav>
And here is a working jsFiddle. You may have to stretch the size of the resultbox for it to show correctly. If you're interested in centering the actual list without the nav stretching to full width, see David Taiaroa's jsFiddle.
而这里是工作的jsfiddle。您可能需要拉伸result框的大小才能正确显示。如果您有兴趣将实际列表居中而不将导航拉伸到全宽，请参阅David Taiaroa 的 jsFiddle。
采纳答案by josh
It turns out that there is a float: leftproperty by default on all navbar-nav>lielements, which is why they were all scrunching up to the left. Once I added the code below, it made the navbarboth centered and not scrunched up.
事实证明，float: left所有navbar-nav>li元素默认都有一个属性，这就是为什么它们都向左蜷缩的原因。一旦我添加了下面的代码，它就会使navbar两者居中而不是皱缩。
.navbar-nav>li {
float: none;
}
Hope this helps someone else who's looking to center a navbar.
希望这可以帮助其他希望将navbar.
回答by David Taiaroa
You can justify the navbar contents by using:
您可以使用以下方法来调整导航栏内容：
@media (min-width: 768px){
.navbar-nav{
margin: 0 auto;
display: table;
table-layout: fixed;
float: none;
}
}
See this live: http://jsfiddle.net/panchroma/2fntE/
现场观看：http: //jsfiddle.net/panchroma/2fntE/
Good luck!
祝你好运！
回答by Nico
To justify the bootstrap 3 navbar-nav justify menu to 100% width you can use this code:
要将 bootstrap 3 navbar-nav justify 菜单对齐为 100% 宽度，您可以使用以下代码：
@media (min-width: 768px){
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: auto;
float: none;
width: 100%;
}
.navbar-nav>li {
display: table-cell;
float: none;
text-align: center;
}
}
回答by Nishanth
Here is a more easy solution. just remove the "navbar-nav" class and add "nav-justified".
这是一个更简单的解决方案。只需删除“navbar-nav”类并添加“nav-justified”。
回答by Lynnais
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
and for the css
和 css
@media ( min-width: 768px ) {
.navbar > .container {
text-align: center;
}
.navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li {
float: none;
display: inline-block;
}
.collapse.navbar-collapse {
width: auto;
clear: none;
}
}
see it live http://www.bootply.com/103172
回答by Lynnais
I know this is an old post but I would like share my solution. I spent several hours trying to make a justified navigation menu. You do not really need to modify anything in bootstrap css. Just need to add the correct class in the html.
我知道这是一篇旧帖子，但我想分享我的解决方案。我花了几个小时试图制作一个合理的导航菜单。您实际上不需要修改 bootstrap css 中的任何内容。只需要在html中添加正确的类。
<nav class="nav navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false">
<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="#top">Brand Name</a>
</div>
<div class="collapse navbar-collapse" id="collapsable-1">
<ul class="nav nav-justified">
<li><a href="#about-me">About Me</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact-me">Contact Me</a></li>
</ul>
</div>
</nav>
This CSS code will simply remove the navbar-brand class when the screen reaches 768px.
当屏幕达到 768px 时，此 CSS 代码将简单地删除 navbar-brand 类。
media@(min-width: 768px){
.navbar-brand{
display: none;
}
}
回答by Kagiso Nyokolodi
Hi you can use this below code for working justified nav
嗨，您可以使用下面的代码来工作合理的导航
<div class="navbar navbar-inverse">
<ul class="navbar-nav nav nav-justified">
<li class="active"><a href="#">Inicio</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
