PHP 包括不与引导下拉菜单一起使用答案

【问题标题】：PHP Include not working with bootstrap dropdown'sPHP 包括不与引导下拉菜单一起使用
【发布时间】：2017-05-24 07:23:00
【问题描述】：

（引导程序 3）如果我这样做了

http://dev.artsicleprojects.com/navbar.php

下拉菜单功能，但是如果我这样做了

http://dev.artsicleprojects.com/index.php

下拉菜单什么都不做。我的 index.php 代码就在这里

<html>
<head>
    <title>Artsicle Projects Dev</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <?php include 'navbar.php'?>
</body>
</html>

编辑

navbar.php 的代码：

    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="script.js"></script>
<div class="jumbotron text-center">
    <h1>Artsicle Projects</h1>
</div>
<div class="dropdown" style="position: absolute; left: 30%">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games

        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="catclicker/index.php">Cat Clicker</a></li>
        <li><a href="#">Exit The Room</a></li>
        <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
    </ul>
</div>
<div class="dropdown" style="position: absolute; left: 60%">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra

        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">Nothing</a></li>
        <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
    </ul>
</div>

提前致谢！

【问题讨论】：

标签： php css twitter-bootstrap-3

【解决方案1】：

这是正确的顺序。将标题部分从 navbar.php 移动到标题：

<html>
<head>
    <title>Artsicle Projects Dev</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.min.js"></script>
</head>

<body>
    <div class="jumbotron text-center">
        <h1>Artsicle Projects</h1>
    </div>
    <div class="dropdown" style="position: absolute; left: 30%">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games

            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="catclicker/index.php">Cat Clicker</a></li>
            <li><a href="#">Exit The Room</a></li>
            <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
        </ul>
    </div>
    <div class="dropdown" style="position: absolute; left: 60%">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra

            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Nothing</a></li>
            <li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
        </ul>
    </div></body>
</html>

【讨论】：

【解决方案2】：

您的index.php 中有多个<head>、<body>、<script> 等无效标记。这是因为navbar.php 是一个完整的（独立）HTML 页面，而您将包含该完整页面进入另一个页面。查看每个页面的源代码，您就会知道发生了什么。

从navbar.php 中删除不在<body> 中的所有内容。也就是说，只包含导航栏的标记，而不是 navbar.php 中的 <head>、<body>、<script> 等。

【讨论】：

哦，修好了。没有阅读