twitter-bootstrap Bootstrap 导航栏没有出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28971400/
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 navbar not appearing
提问by Reverend Bubbles
I have the following navcode (see below) and it's not working.
我有以下nav代码（见下文），但它不起作用。
Specifically, the links simply aren't showing up at all. When I shrink the screen, the icon-bars show up, but, when I click on them, nothing appears. It's like the entire nav-collapsediv is hidden somehow.
具体来说，链接根本没有显示。当我缩小屏幕时，图标栏会出现，但是，当我点击它们时，什么也没有出现。就像整个nav-collapsediv 以某种方式隐藏了一样。
I tried to make a JSFiddle, but it looked even worse and I think it's because I'm not sure how to add Bootstrap to JSFiddle.
我试图制作一个 JSFiddle，但它看起来更糟，我认为这是因为我不确定如何将 Bootstrap 添加到 JSFiddle。
I also am adding some styling to the navbar elements. Below is the relevant CSSin case that may be the culprit somehow.
我还为导航栏元素添加了一些样式。以下是相关CSS情况，以防万一可能是罪魁祸首。
.navbar {
top: 10px;
left: 0px;
height: 22px;
z-index: 20;
width: 100%;
background-color: #D2B48C;
font-size: 16px;
font-weight: bold;
text-align: center;
position: relative;
width: 85%;
margin: 0px auto;
-moz-box-shadow: 10px 10px 5px #333;
-webkit-box-shadow: 10px 10px 5px #333;
box-shadow: 10px 10px 5px #333;
}
.navbar-inner {
background-color: #D2B48C;
position: absolute;
margin-right: -50%;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
.navbar .container {
background-color: #D2B48C;
position: absolute;
margin-right: -50%;
left: 50%;
transform: translate(-50%, -50%);
top: 50%;
}
.nav-collapse {
background-color: #D2B48C;
color: #355E3B;
z-index: 20;
}
.collapse {
background-color: #D2B48C;
}
.nav-collapse ul {
height: 100%;
}
.nav-collapse ul li {
display: inline;
padding: 0 20px;
color: #355E3B;
height: 100%;
}
.navbutton {
padding: 0 50px;
text-transform: uppercase;
background-color: #D2B48C;
color: #355E3B;
}<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul>
<li class="navbutton" id="home_button">home</li>
<li class="navbutton" id="services_button">services</li>
<li class="navbutton" id="facility_button">facility</li>
<li class="navbutton" id="trainers_button">trainers</li>
<li class="navbutton" id="contact_button">contact</li>
</ul>
</div>
</div>
</div>
</div>Thoughts?
想法？
Thanks!
谢谢！
回答by Reverend Bubbles
FIGURED IT OUT!!!
弄清楚了！！！
While I was going to the latest CSS Bootstrap files, I apparently neglected to link to the latest Bootstrap JS file! I included that and the nav works. I still need to clean it up a little, but now I can see it at least to do that!
当我要访问最新的 CSS Bootstrap 文件时，我显然忽略了链接到最新的 Bootstrap JS 文件！我把它包括在内，导航工作。我仍然需要稍微清理一下，但现在我至少可以看到它这样做了！
Thanks all for your assistance!
感谢大家的帮助！
回答by feitla
Here is the html from the bootstrap example page, it looks like you are missing navbar-header. Make sure you follow the html correctly.
这是bootstrap 示例页面中的 html ，看起来您丢失了navbar-header。确保您正确地遵循 html。
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="collapse navbar-collapse">
<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><!--/.nav-collapse -->
</div>
</nav>
回答by jseiller
You did not say which version of Bootstrap you are using, I suppose 3.x. But your code doesn't fit Bootstrap's standard.
I think the icon-bar, to toggle navigation, have to be in a navbar-header. Also I don't know (maybe you can) if you can data-targeton a class.
你没有说你使用的是哪个版本的 Bootstrap，我想是 3.x。但是您的代码不符合 Bootstrap 的标准。我认为icon-bar, 要切换导航，必须在导航栏标题中。我也不知道（也许你可以）你是否可以data-target上课。
You should try this code :
你应该试试这个代码：
<div class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggleId">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <a class="navbar-brand" href="#">MySite</a> -->
</div>
<div class="collapse navbar-collapse" id="toggleId">
<ul>
<li class="navbutton" id="home_button"><a href="#">home</a></li>
<li class="navbutton" id="services_button"><a href="#">services</a></li>
<li class="navbutton" id="facility_button"><a href="#">facility</a></li>
<li class="navbutton" id="trainers_button"><a href="#">trainers</a></li>
<li class="navbutton" id="contact_button"><a href="#">contact</a></li>
</ul>
</div>
</div>
</div>
