Bootstrap導航欄不能與最新版本一起工作

我在創建bootstrap導航欄時遇到了一個簡單的問題。我有複製最新的CDN文件並粘貼到我的頭部分。一切工作正常，但我的導航欄子菜單和下拉菜單不會打開。我不知道我在想什麼，請任何人指導。完整的代碼如下。謝謝。Bootstrap導航欄不能與最新版本一起工作

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 

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

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <!-- 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> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 

      <nav class="navbar navbar-inverse"> 
       <div class="container-fluid"> 
        <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> 
         <a class="navbar-brand" href="#">WebSiteName</a> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Home</a></li> 
          <li class="dropdown"> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Page 1-1</a></li> 
            <li><a href="#">Page 1-2</a></li> 
            <li><a href="#">Page 1-3</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Page 2</a></li> 
          <li><a href="#">Page 3</a></li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li> 
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 

     </div> 
    </form> 
</body> 
</html>

來源

2016-07-30 Rauf Abid

對我很好用 –

你在哪裏提到jQuery？ Bootstrapjs依賴於jQuery的功能。 – vanburen

你的來源是正確的，但是你錯過了jQuery。這應該是你的HTML的輸出。

<head runat="server"> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
<body> 
<!-- Your Contents/Tags Here --> 

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.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> 
</body>

來源

2016-07-30 06:34:09 iMarkDesigns

更改您的Bootstrap link並添加這三個。改變這些後，它適用於我。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

相反，這些三：

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

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

    <!-- 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>

來源

2016-07-30 05:25:20

感謝您的回覆，我已經完成了，但我需要做的最新版本，什麼可以與最新版本的問題，謝謝。 –

@RaufAbid你必須在bootstrap.js之前添加jquery –

感謝所有人，我錯過了j查詢文件，我已包含並且一切正常。 –

Bootstrap導航欄不能與最新版本一起工作

回答

相關問題