Bootstrap导航栏崩溃/下拉打破

时间:2015-02-03 22:05:56

标签: twitter-bootstrap nav collapse

您好我是Bootstrap的新手,我正在尝试实现自适应导航。我最初使它工作但它不再有效。这是我的代码:

HTML:

<div class="row no-padding">  
<div class="col-md-12">
<nav class="navbar center" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle btn" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar gold"></span>
    <span class="icon-bar gold"></span>
    <span class="icon-bar gold"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active2"><a href="#" class="btn no-padding">Home</a></li>
    <li><a href="about.html" class="btn">Location</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle btn" data-toggle="dropdown" href="accomodation.html">Accomodation <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Deluxe</a></li>
        <li><a href="#">Executive</a></li>
      </ul>
    </li>
    <li><a href="facilities.html" class="btn">Facilities</a></li>
    <li><a href="gallery.html" class="btn">Gallery</a></li>
    <li><a href="contact.html" class="btn">Contact Us</a></li>
  </ul>
</div>
</nav>
</div>

CSS:

.nav {
background: #3d3d3d;
background-image: -webkit-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -moz-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -ms-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -o-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: linear-gradient(to bottom, #3d3d3d, #5c5c5c);
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 14px;
height:31px;
text-align:center;
text-decoration:none;
display:inline;
opacity:50%;

}

.btn {
list-style-type: none;
background: #3d3d3d;
background-image: -webkit-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -moz-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -ms-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: -o-linear-gradient(top, #3d3d3d, #5c5c5c);
background-image: linear-gradient(to bottom, #3d3d3d, #5c5c5c);
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
color: #aaaa8a;
font-size: 14px;
padding: 0px;
border: solid #383838 1px;
text-decoration: none;
line-height:none;
} 

.btn:hover {
background: #737373;
background-image: -webkit-linear-gradient(top, #737373, #4f4f4f);
background-image: -moz-linear-gradient(top, #737373, #4f4f4f);
background-image: -ms-linear-gradient(top, #737373, #4f4f4f);
background-image: -o-linear-gradient(top, #737373, #4f4f4f);
background-image: linear-gradient(to bottom, #737373, #4f4f4f);
text-decoration: none;
color: #aaaa8a;
}

#active{
background-color:#099bdd;
text-decoration:none;
color:#CDA500;
}

a:link {
color: #aaaa8a;
}

的Javascript / jQuery的:

<!--Nav Bar Collapse jQuery-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<!--Nav Bar Toggle-->
<script type="text/javascript">
$(document).ready(function () {
          $(".navbar-toggle").on("click", function () {
                $(this).toggleClass("active");
          });
    });

    $('.dropdown-toggle').dropdown()
</script>

对不起,我是新手,任何帮助将不胜感激!谢谢。

0 个答案:

没有答案