我有site运行Bootstrap 3.3.6,我在xs视图中没有显示下拉菜单时遇到问题。我已经仔细检查了代码并且没有在控制台中收到任何错误,但我也没有在移动视图中看到下拉菜单。
这是HTML:
<nav class="navbar navbar-default">
<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>
</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-us/">About Us</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/pickup-and-delivery/">Pickup and Delivery</a></li>
<li><a href="/news/">News</a></li>
<li><a class="contact" href="/contact-us/">Contact Us</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
这是我修改过的CSS:
.navbar-default {
border-color: transparent !important;
background: url(/images/bg_navbar.png) repeat-x left center;
background-color: none !important;
}
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777;
}
.navbar-default .navbar-nav > li > a {
font-family: "futura-pt",sans-serif;
font-size: 18px;
font-weight: 800;
color: #fff;
display: block;
margin: 0 auto;
text-transform: uppercase;
border-right: 1px solid #fff;
padding: 14px 21px;
}
.navbar-default .navbar-nav > li > a.contact { border-right: none; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
color: #eaeaea;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
font-family: "futura-pt",sans-serif;
font-weight: 800;
text-transform: uppercase;
text-align: center;
background-color: transparent;
background-color: transparent !important;
}
.navbar > .container { padding: 0; }
感谢您解决此问题的任何帮助。