html - PHP 文件因 Bootstrap 而部分失败

我试图用 bootstrap 设计一个名为 dashboard.php 的 php 文件。我只在文件中写了一些 html 代码来开始。当我测试它时，我发现'ul'标签中的样式是错误的。然而，其他类，如“class="col-sm-2"' 'class="row"' 正在按预期工作。这是 dashboard.php 中的代码:

<?php ?>

<!DOCTYPE>

<html>
    <head>
        <title>Dashboard</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2">
                    <ul class="nav nav-pills nav-stacked" >
                        <li><a href="dashboard.php">
                        <span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
                        <li><a href="#">
                        <span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
                        <li><a href="#">Categories</a></li>
                        <li><a href="#">Manage Admins</a></li>
                        <li><a href="#">Comments</a></li>
                        <li><a href="#">Live Blog</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
                </div><!-- End of side area-->

                <div class="col-sm-10">
                </div><!-- End of main area-->
            </div><!-- End of raw-->
        </div>
    </body>
</html>

这是我在测试 dashboard.php 时制作的屏幕截图: enter image description here

如果你检查图像。蓝色文字的左侧属于'ul'标签。画风完全不对。它也未能添加字形图标。我检查了我的 html 代码的语法，似乎没有错。

我还想添加更多信息:

文件的扩展名为.php
我在打开 Apache 的情况下打开了 XAMPP
打开文件 dashboard.php 的 url 是正确的: http://localhost/studyexample/PHPCMS/dashboard.php

你能帮我找出为什么“ul”标签中的样式完全错误吗？非常感谢。

最佳答案

这里的问题可能是您正在为您的 Assets 使用相对 URL，但没有使用基本标签。最简单的做法就是在 Assets 路径中添加一个正斜杠。当我在 CodePen 中运行您的代码时，它看起来应该:

https://codepen.io/anon/pen/vpWLqo

所以，我的意思是，对于以下 Assets :

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

添加一个正斜杠，使 URL 是绝对的:

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

一旦你这样做了，我想你会发现事情对你来说开始变得不一样了。如果没有，您将需要指定更多 Assets 的完整路径，这意味着您可能需要拥有完整路径，例如:

<link rel="stylesheet" type="text/css" href="/studyexample/PHPCMS/css/bootstrap.min.css">
<script src="/studyexample/PHPCMS/js/jquery-3.2.1.min.js"></script>
<script src="/studyexample/PHPCMS/js/bootstrap.min.js"></script>

关于html - PHP 文件因 Bootstrap 而部分失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48123012/

html - PHP 文件因 Bootstrap 而部分失败

上一篇：CSS margin-自动布局之谜

下一篇：html - 如何使输入(复选框)和标签对齐？