twitter-bootstrap 为什么我的 Bootstrap Toggle Navbar 消失了？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23402384/
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
Why is my Bootstrap Toggle Navbar disappearing?
提问by twilco
So the "hamburger" toggle navbar icon seems to be invisible after I collapse the page to the point that it's supposed to appear. Both the 3 icon bars and the actual button are invisible. However, it still seems to work in that it drops down when clicked on. I have gone through the styles effecting it using the 'Inspect Element' function in Google Chrome, toggling and changing numerous styles to no avail.
因此，在我将页面折叠到应该出现的位置后，“汉堡包”切换导航栏图标似乎不可见。3 个图标栏和实际按钮都是不可见的。但是，它似乎仍然有效，因为单击时它会下降。我已经使用谷歌浏览器中的“检查元素”功能浏览了影响它的样式，切换和更改众多样式无济于事。
Can anyone help me understand why it's doing this?
谁能帮我理解为什么要这样做？
Here's a picture illustrating the problem, and my code:
这是说明问题的图片和我的代码：
<style>
/*body {
background-color: #c0c0c0;
}*/
@media (max-width: 767px) {
}
@media (min-width: 768px) {
/*.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}*/
body {
}
.navbar-nav > li {
border-left: 1px solid;
}
.navbar {
border-radius-bottom-left: 5px;
border-radius-bottom-right: 5px;
/* background-color: #99ccff;*/
width: 100%;
}
.nav>li>a:hover, .nav>li>a:focus {
/*background-color: #eee !important;*/
}
}
.navbar {
/* background-color: #99ccff; */
border: 1px solid;
}
</style>
<title> Bootstrap Testing </title>
</head>
<body role = "document">
<div class = "row-fluid">
<div class = "col-lg-9">
<img src = "pics/edviewrateBanner.png">
</div>
<div class = "col-lg-3">
<button type="button" class="btn btn-lg btn-primary visible-lg">Sign In</button>
</div>
</div>
<div class = "row-fluid">
<div class = "col-lg-3 col-lg-offset-9 hidden-xs">
<button type="button" class="btn btn-lg btn-primary" style = "visibility: hidden;">ButtonToTakeUpSpace</button>
</div>
</div>
<div class = "row-fluid">
<div class = "col-lg-12">
<nav class = "navbar" role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mainNavbarInfo">
<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 visible-xs visible-sm" href = "#"> EdViewRate</a>
</div>
<!-- Begin Navbar items -->
<div class = "collapse navbar-collapse" id = "mainNavbarInfo">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href = "#"><span class = "glyphicon glyphicon-home"></span> Home </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-list-alt"></span> SLO Generator </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-question-sign"></span> SLO Tutorial </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-cloud-upload"></span> Sign up </a></li>
<li class = "dropdown visible-xs visible-sm visible-md">
<a class = "dropdown-toggle" href = "#" data-toggle="dropdown"><span class = "glyphicon glyphicon-share-alt"></span> Sign In <strong class = "caret"></strong></a>
<div class = "dropdown-menu" style = "padding: 15px; padding-bottom: 10px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
回答by OregonJeff
The problem is that you haven't specified the "theme" to use for the navbar. You must a class of navbar-defaultor navbar-inversealong with the navbarclass on your navelement.
问题是您没有指定用于导航栏的“主题”。您必须在您的元素上使用类navbar-default或navbar-inverse与navbar类一起使用nav。
In doing this, all the Bootstrap CSS appears to do to the navbar-toggleis apply a border-colorof #dddto it. You could probably omit the navbar-defaultclass, but there's no telling what other styling problems with the navbaryou're likely to run into. Better to apply that class and then override the specific things you don't want/need.
在这一过程中，所有的引导CSS似乎做的navbar-toggle是应用border-color的#ddd它。您可能可以省略该navbar-default课程，但不知道navbar您可能会遇到哪些其他样式问题。最好应用该类，然后覆盖您不想要/不需要的特定内容。
