2017-04-25 71 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 ..