为什么Bootstrap导航不会在Mobile View中扩展?

时间:2016-03-22 16:31:33

标签: twitter-bootstrap

我有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; }

感谢您解决此问题的任何帮助。

0 个答案:

没有答案