Question

我一直在试验Twitter Bootstrap并遇到了一个我无法解决的问题。基本上，我有一个非常简单的HTML文件（基于本教程的开头：http://www.sitepoint.com/understanding-twitter-bootstrap-3/），我可以打开文件，但它没有加载CSS。

我在本地以及从我的Web服务器尝试了这个，在这两个实例中，CSS都没有加载。本教程在引用的地方有一些错误我已经修复了，但我在另一个教程中遇到了同样的问题。

index.html与CSS文件夹位于同一文件夹中。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

<body>
<h1>Hello, world!</h1>

<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

在我摧毁我的Macbook之前，请为上帝的爱帮助我。

Answer 1

尝试使用bootstrap.css代替bootstrap.min.css。此外，请确保它在正确的路径中。

您可以尝试的另一件事是在链接规范中使用media="all"而不是media="screen"。

jQuery的javascript链接标记看起来很可疑。在本地目录上提供相对路径，或者在外部URL上提供绝对路径。

Answer 2

我有同样的问题，但它是独特的，不确定其他人是否有同样的问题。我在“href =”之前有“rel =”。只需交换位置，即“rel =”之前的“href =”即可解决问题。非常感谢您使用正确的语法。

Answer 3

我按照以下步骤加载或应用Boostrap CSS。

首先检查 bootstrap 在 node_modules 中可用吗？

如果看不到，请使用以下命令安装引导程序

npm i bootstrap

安装成功后，再次验证node_modules中的boostrap。 enter image description here

下一步打开您的项目 styles.css 文件，然后在行下方导入。

@import '~bootstrap/dist/css/bootstrap.css';

Answer 4

将引导程序文件上传到主机时，请务必上传所有文件，甚至是.map文件。我做到了，它对我有用。

Answer 5

我有同样的问题，我解决了。

在Windows记事本中打开文件，选择save_as＆gt;在“保存”按钮旁边，打开“编码”下拉列表，然后选择“UTF-8”！

我的文件保存在Unicode编码中。我使用Windows记事本保存 - 作为我的UTF-8编码文件，问题就消失了。

您也可以使用notepad ++来更改文件的编码。祝你好运

Answer 6

我找到了这个答案，因为它是谷歌搜索量最高但是我出于完全不同的原因出现了这个问题。

对于那些可能犯同样错误的人，请记得添加

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

或对另一个版本的bootstrap的引用，以便您的代码知道从何处获取所有引导程序相关信息

Answer 7

听起来这只是一个简单的目录问题。你是说你在同一个文件夹中有HTML文件和CSS文件吗？然后加载文件链接，如下所示：

<link href="bootstrap.min.css" rel="stylesheet" media="all">

否则如果您的css文件位于＆＃34; css＆＃34;然后将目录更改为：

<link href="css/bootstrap.min.css" rel="stylesheet" media="all">

如果情况更糟，请使用外部链接进行故障排除：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

Bootstrap CSS没有加载

7 个答案: