twitter-bootstrap Twitter Bootstrap 3 - 导航栏不水平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18191177/
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 - Navbar not horizontal
提问by Quantize
I'm fiddlin' around with bootstrap 3. I'm trying to make an horizontal navbar except it doesn't turn out horizontal. I thought the navbar should be horizontal out of the box, do I perhaps need some additional css?
我正在使用引导程序 3。我正在尝试制作一个水平导航栏，但它不会变成水平的。我认为导航栏应该是水平的，我可能需要一些额外的 css 吗？
I tried to make a navbar copying code from the bootstrap documentation like this:
我试图从引导程序文档中制作一个导航栏复制代码，如下所示：
<div class="row">
<div class="col-12">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
回答by edsioufi
Your code is for BootStrap 2 and needs to be changed. In bootstrap 3:
您的代码适用于 BootStrap 2，需要更改。在引导程序 3 中：
<a class="brand" href="#">Title</a>becomes<a class="navbar-brand" href="#">Title</a><ul class="nav">becomes<ul class="nav navbar-nav">- No more need for
<div class="navbar-inner">
<a class="brand" href="#">Title</a>变成<a class="navbar-brand" href="#">Title</a><ul class="nav">变成<ul class="nav navbar-nav">- 不再需要
<div class="navbar-inner">
More info in the doc here.
此处文档中的更多信息。
回答by Quantize
I just added this little bit of CSS, check it out and let me know if it works for you:
我刚刚添加了一点 CSS，检查一下，让我知道它是否适合你：
CSS:
CSS：
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* Internet Explorer 7 compatibility */
*zoom:1;
vertical-align: top;
}
HTML:
HTML：
<div class="row">
<div class="col-12">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
