2017-04-25 188 views
0

我一直在尝试几个小时来解决这个问题,但我无法绕过它我想知道如果有人在这里可以帮助我!导航栏崩溃不起作用

<!-- navbar --> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
    <ul class="nav navbar-nav"> 
     <li class="upage"><a href="index.html">home</a></li> 
     <li><a href="team.html">team</a></li> 
     <li><a href="services.html">services</a></li> 
     <li><a href="events.html">events</a></li> 
     <li><a href="team.html">store</a></li> 
    </ul> 
    </div> 
    </nav> 
    <!-- navbar --> 

这是我的HTML我的引导导航栏可惜折叠按钮没有点击

.navbar .nav > li > a { 
    color: #F2F4F4; 
    font-family: 'Oxygen', sans-serif; 
    font-weight: 300; 
    font-size: 20px; 
    text-transform: ; 
    padding-left: 35px; 
    text-decoration: none; 
    } 

.navbar-default { 
    margin-top: 0px; 
    background: #000; 
    background: rgba(0,0,0,0.4); 
    border-color: transparent; 
} 


@media (min-width: 768px){ 
    .navbar-nav { 
     float:none; 
     margin: 0 auto; 
     display: table; 
     table-layout: fixed; 
    } 
} 

工作时那是我的CSS

谢谢你,我希望有人能帮帮我!

回答

2
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> </button> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</div> 

尝试这种方式..

1

这里是一个工作片断检查这一点,我已经加入bootstrap样式和bootstrap.js和包括jquery图书馆请检查该

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- navbar --> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="upage"><a href="index.html">home</a></li> 
 
     <li><a href="team.html">team</a></li> 
 
     <li><a href="services.html">services</a></li> 
 
     <li><a href="events.html">events</a></li> 
 
     <li><a href="team.html">store</a></li> 
 
    </ul> 
 
    </div> 
 
    </nav> 
 
    <!-- navbar --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

1

对我来说你的代码工作正常..我认为错误m AY是在加载脚本..确保脚本是在下面的顺序进行..

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

jQuery的需要在第一,然后bootstrap.js ..