Bootstrap導航欄教程不適用於任何瀏覽器

任何人都可以告訴我爲什麼這個導航欄不起作用。我什麼都試過，但它只是保持摺疊所有的時間Bootstrap導航欄教程不適用於任何瀏覽器

<nav class="navbar navbar-default navbar-fixed-top"> 
    <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> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 

      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="../navbar/">Default</a></li> 
       <li><a href="../navbar-static-top/">Static top</a></li> 
       <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav>

來源

2017-10-13 TopUser2233

你需要包括你的菜單工作jQuery和Bootstrap JavaScript來切換它。 https://www.bootstrapcdn.com/ – Blazemonger

什麼版本的jQuery最適合在html5中引導？ – TopUser2233

這取決於你的目標是什麼瀏覽器。 jQuery 1.xx需要支持IE和其他「現代」瀏覽器。 – Blazemonger

你當前使用Bootstrap 3導航欄，但拉動Bootstrap 4 CSS。

與此

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

更換您的引導CSS文件如果您想使用的導航欄，您還需要對JavaScript文件和jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

下面是完整的HTML

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

<body> 

    <nav class="navbar navbar-default navbar-fixed-top"> 
     <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> 
       <a class="navbar-brand" href="#">Project name</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#about">About</a></li> 
        <li><a href="#contact">Contact</a></li> 

       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="../navbar/">Default</a></li> 
        <li><a href="../navbar-static-top/">Static top</a></li> 
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
       </ul> 
      </div> 
      <!--/.nav-collapse --> 
     </div> 
    </nav> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

來源

2017-10-13 19:03:58 TidyDev

你需要在boostrap.min.js之前加載jQuery – Blazemonger

@Blazemonger謝謝你指出，你是對的。更新了我的答案。 – TidyDev

如果你加載了所有需要的庫，你的HTML結構似乎很好。

你需要

引導4 CSS https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css
jQuery的https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
引導4個JS https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js它使用jQuery的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <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> 
 
     <a class="navbar-brand" href="#">Project name</a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 

 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="../navbar/">Default</a></li> 
 
     <li><a href="../navbar-static-top/">Static top</a></li> 
 
     <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</nav>

您的代碼似乎還需要https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js（它出現的元素用戶點擊時，彈出框），而它

來源

2017-10-13 19:18:06

Bootstrap導航欄教程不適用於任何瀏覽器

回答

相關問題