Bootstrap 下拉菜单不能作为 asp 包含文件工作

Question

我正在为我的网站上的导航栏使用服务器端包含。引导导航栏在它自己的文件中工作得很好：下拉菜单在移动设备上打开和关闭，但是一旦我将它包含在我想要它的页面上（），下拉菜单只会下拉并且不会返回。

我不确定我做错了什么，或者是否有人能弄清楚出了什么问题。

这里是导航栏本身正常工作的代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="/index.asp">O<span>NE</span> HEALTH <small>Nebraska One Health Resource Portal</small></a>

        <button type="button" class="navbar-toggle" data-toggle="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>
    <ul class="nav navbar-nav navbar-right collapse navbar-collapse">

        <li><a href="/health-resources.asp">Health Resources</a></li>
        <li class="active"><a href="/around-the-globe.asp">Around the Globe</a></li>

        <form class="navbar-form navbar-right search" role="search">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>

    </ul>  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

然后我在这里尝试包含文件，下拉列表不再起作用....

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="../_css/main.css" rel="stylesheet" type="text/css">

<!-- NAVIGATION -->
<!--#include virtual="/navigation/navigation.asp" -->

     <div class="index-main">
    <div class="container">
      <div class="col-md-10 col-md-offset-1">
        <h1 style="text-align: center">One Health</h1>
        <h4 style="text-align: center; line-height: 35px; font-weight: 300">One Health is a comprehensive approach to public health which recognizes that the health of the environment, animals (wild and domestic), and humans are interconnected. To have long-term success against diseases, we have to address all three areas because diseases in one group frequently spill over and affect the others. The Nebraska One Health Program is a grant-funded program to network, research, and educate producers, pest control operators, educators, public health officals, and other interested parties about addressing diseases in nature that affect humans and their animals.</h4>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

下载文件并将它们包含在本地的 html 页面中并检查一次。