bootstrap導航欄collaspe不工作

我在這裏遵循了很多技巧，但我仍然沒有得到我的鏈接堆疊在較小的屏幕模式（三欄圖標確實出現，但沒有迴應）代碼如下，真的很感謝所有幫助bootstrap導航欄collaspe不工作

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Learn Spanish noun gender easily</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 
    elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/ 3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    <style> 

    .box { 
     border:solid grey; 
     background-color:#d3d3d3; 
      } 


    #div1 { 
     background-image: url('images/cherry.jpg'); 
     } 

    #div2 { 
     background-image: url('images/lavender.jpg'); 
     } 
    #div3 { 
     background-image: url('images/rose.jpg'); 
     } 

    .contentDiv { 
     height:800px; 
    } 

    .navbar-brand { 
     font-size:1.7em; 
    } 
    </style> 

    </head> 
    <body data-spy="scroll" data-target=".navbar-collapse"> 

    <div class="navbar navbar-default navbar-fixed-top"> 

     <div class="container"> 

      <div class="navbar-header"> 

       <a href="" class="navbar-brand">Learn Spanish noun Genders</a> 

        <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> 
         <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 class="collapse navbar-collapse"> 

       <ul class="nav navbar-nav"> 

        <li class="active"><a href="#div1">Home</a></li> 
        <li><a href="#div2">About</a></li> 
        <li><a href="#div3">Download</a></li> 

       </ul> 


      </div> 

     </div> 

    </div> 


     <div id="container"> 

      <div class="row"> 

       <div class="col-md-4 box"></div> 
       <div class="col-md-4 box">Content</div> 
       <div class="col-md-4 box">Content</div> 


      </div> 
     </div> 


     <div class="container"> 


     <div id="div1" class="contentDiv"><p>Content and some more lalalalalallalala</p></div> 
     <div id="div2" class="contentDiv">Content</div> 
     <div id="div3" class="contentDiv">Content</div> 


     </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript --> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2014-11-01 panda_mc

試試這個代碼爲您導航：在按鈕

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a href="" class="navbar-brand">Learn Spanish noun Genders</a> 
</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#div1">Home</a> 
      </li> 
      <li><a href="#div2">About</a> 
      </li> 
      <li><a href="#div3">Download</a> 
      </li> 
     </ul> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container --> 
</nav>

來源

2014-11-03 16:08:23 Macsupport

你做了錯誤數據切換屬性

應該是datatoggle沒有datatoggle

後改變這個代碼將工作

來源

2014-12-12 10:35:14

bootstrap導航欄collaspe不工作

回答

相關問題