1
因此，在將頁面摺疊到應該出現的位置後，「漢堡包」切換導航欄圖標似乎不可見。 3個圖標欄和實際按鈕都不可見。但是，它似乎仍然可以在點擊時下降。我使用谷歌瀏覽器中的「檢查元素」功能瀏覽了它的風格，切換並改變了許多風格，但無濟於事。爲什麼我的引導切換導航欄消失？
任何人都可以幫助我理解爲什麼這樣做？
下面是說明問題的圖片，我的代碼：
<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>
你可以將它設置爲jsFiddle嗎？ – OregonJeff
是的，我從現在開始做。感謝Juhana的編輯。 – Tylerlee12