Bootstrap下拉導航在包含在php文件中時不起作用

Question

在這里，我有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文件中，我使用包含了此文件。 但這行不通。 請幫忙！

Answer 1

..您可能使用了錯誤的路徑來包含文件。 右鍵單擊加載的頁面，查看源代碼，然后單擊bootstrap.min.css和bootstrap.js。 它們加載正確嗎？ 如果不是，則可能與您的路徑有關。

Answer 2

您是否包含bootstrap-dropdown.js？ 嘗試將此行添加到代碼中

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

Answer 3

交叉檢查樣式表的路徑。 我曾經遇到過這個問題，似乎很棘手，但是它有一個直接的解決方案。 您沒有正確鏈接到樣式表。 從瀏覽器查看頁面源，並打開指向引導樣式表的鏈接，可能找不到它們。

您也可以將其添加到任何代碼之前，但在樣式表標題（注釋）之后的“ style.css”頂部：

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

Bootstrap下拉導航在包含在php文件中時不起作用

問題描述

3 個解決方案

解決方案1
0 2014-07-29 06:50:12

解決方案2
0 2014-07-29 12:35:42

解決方案3
0 2015-10-30 12:25:33

Bootstrap下拉導航在包含在php文件中時不起作用

問題描述

3 個解決方案

解決方案1 0 2014-07-29 06:50:12

解決方案2 0 2014-07-29 12:35:42

解決方案3 0 2015-10-30 12:25:33

解決方案1
0 2014-07-29 06:50:12

解決方案2
0 2014-07-29 12:35:42

解決方案3
0 2015-10-30 12:25:33