当包含在 php 文件中时，Bootstrap 下拉导航不起作用答案

【问题标题】：Bootstrap dropdown nav not working when included in php file当包含在 php 文件中时，Bootstrap 下拉导航不起作用
【发布时间】：2015-10-30 20:25:33
【问题描述】：

在这里，我有 2 个文件 index.php 和 pop_map.php。我已经使用引导程序创建了 index.php 文件，当我对其进行控制台操作时，它工作正常，但是当我尝试从包含 index.php 文件的 pop_map.php 文件中调用它时，标题和导航之间存在差距栏和下拉按钮不起作用。请帮忙！

index.php 文件

<html>
<head>
    <title>Visualization</title>
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <link href = "css/bootstrap.min.css" rel = "stylesheet">


    <style type="text/css">
    @media(max-width: 10px){
        h1{
            font-size: 22px;
            font-color:blue;
            text-align: center;
        }
    }       


    </style>
</head>
<body>
<div class="container">
    <div class="start navbar-default navbar-fixed-top" style="text-align:center;background-color:#006400;height:100px" >    
    <h1>Millenium Development Goal-7<br><small>Ensure Environmental Sustainability</small></br></h1>
    <div class="navbar navbar-inverse navbar-static-top " style="background-color:#9ACD32" > 




        <a href="#" class="navbar-brand" style="color:008000">Home</a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>


        </button>

        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="pop_map.php" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Population
                    <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="pop_map.php" style="color:#008000">Central</a></li>
                        <li><a href="#" style="color:#008000">Western</a></li>
                        <li><a href="#" style="color:#008000">Far-Western</a></li>
                        <li><a href="#" style="color:#008000">Mid-Western</a></li>
                        <li><a href="#" style="color:#008000">Eastern</a></li>


                    </ul>

                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Sanitation
                    <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#" style="color:#008000">Central</a></li>
                        <li><a href="#" style="color:#008000">Western</a></li>
                        <li><a href="#" style="color:#008000">Far-Western</a></li>
                        <li><a href="#" style="color:#008000">Mid-Western</a></li>
                        <li><a href="#" style="color:#008000">Eastern</a></li>


                    </ul>

                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Water
                    <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#" style="color:#008000">Central</a></li>
                        <li><a href="#" style="color:#008000">Western</a></li>
                        <li><a href="#" style="color:#008000">Far-Western</a></li>
                        <li><a href="#" style="color:#008000">Mid-Western</a></li>
                        <li><a href="#" style="color:#008000">Eastern</a></li>


                    </ul>

                </li>

            </ul>   

        </div>
        </div>
    </div>
    </div>


    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src ="js/bootstrap.js"></script>


</body>
</html>

现在，在 pop_map.php 文件中，我使用 .但它不起作用。请帮忙！

【问题讨论】：

你的 pop_map.php 文件是什么样子的？

标签： php html css twitter-bootstrap

【解决方案1】：

..您可能使用了错误的路径来包含文件。右键点击加载的页面，查看源码，点击bootstrap.min.css和bootstrap.js。它们是否正确加载？如果不是，可能与您的路径有关。

【讨论】：

【解决方案2】：

您是否包含了 bootstrap-dropdown.js？尝试将此行添加到代码中

<script src="js/bootstrap-dropdown.js"></script>

【讨论】：

【解决方案3】：

交叉检查样式表的路径。我曾经遇到过这个问题，它看起来很棘手，但它有一个直接的解决方案。您没有正确链接到您的样式表。从浏览器查看页面源代码并打开引导样式表的链接，可能找不到它们。

您也可以在“style.css”顶部的任何代码之前但在样式表标题（注释）之后添加：

@import url('css/bootstrap.min.css');

【讨论】：