Html Bootstrap CSS 未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21415725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap CSS not loading
提问by user3246092
I've been experimenting with Twitter Bootstrap and have run into a problem I cannot resolve. Basically, I have a very simple HTML file (based on the beginning of this tutorial: http://www.sitepoint.com/understanding-twitter-bootstrap-3/) and I can open the file, but it is not loading the CSS.
我一直在试验 Twitter Bootstrap，但遇到了一个我无法解决的问题。基本上，我有一个非常简单的 HTML 文件（基于本教程的开头：http: //www.sitepoint.com/understanding-twitter-bootstrap-3/），我可以打开该文件，但它没有加载CSS。
I've tried this locally as well as from my web server and in both instances, the CSS does not load. This tutorial has some errors on where quotes go which I've fixed, but I've had the same problems with another tutorial.
我已经在本地和我的网络服务器上尝试过这个，在这两种情况下，CSS 都没有加载。本教程在引用的位置上有一些错误，我已修复，但我在另一个教程中遇到了同样的问题。
index.html is located in the same folder as the CSS folder.
index.html 与 CSS 文件夹位于同一文件夹中。
Here is my HTML:
这是我的 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>
Please for the love of God help me before I destroy my Macbook.
在我毁掉我的 Macbook 之前，上帝的爱请帮助我。
回答by reectrix
Try using bootstrap.cssinstead of bootstrap.min.css. Also, make sure that it's in the correct path.
尝试使用bootstrap.css代替bootstrap.min.css. 另外，请确保它位于正确的路径中。
Another thing you can try as well is using media="all"instead of media="screen"in your link specifications.
您也可以尝试的另一件事是使用media="all"而不是media="screen"在您的链接规范中。
Your javascript link tag for jQuery looks suspicious. Either give a relative path on your local directory, or the absolute path to an external url.
您的 jQuery javascript 链接标签看起来很可疑。要么给出本地目录的相对路径，要么给出外部 url 的绝对路径。
回答by Prashant Shende
I had the same problem but it was unique, not sure if other had the same issue. I had "rel=" before the "href=". Just swapping the places, i.e. "href=" before "rel=" resolved the issue. Thanks a ton for the correct syntax.
我有同样的问题，但它是独一无二的，不确定其他人是否有同样的问题。我在“href=”之前有“rel=”。只需交换位置，即在“rel=”解决问题之前的“href=”。非常感谢正确的语法。
回答by Shakeer Hussain
I followed below steps to load or apply Boostrap css.
我按照以下步骤加载或应用 Boostrap css。
first check bootstrapavailable in node_modules?
首先检查node_modules 中可用的引导程序？
If you don't see, Install bootstrap with below command
如果没有看到，请使用以下命令安装引导程序
npm i bootstrap
After installation successful, verfiy again boostrap in node_modules. enter image description here
安装成功后，再次验证node_modules中的boostrap。 在此处输入图片说明
next open your project styles.cssfile and import below line.
接下来打开你的项目styles.css文件并导入下面的行。
@import '~bootstrap/dist/css/bootstrap.css';
回答by Kyle Berkland
Sounds like this is just a simple directory issue. You are saying you have the HTML file and the CSS file in the same folder right? Then to load the file link it like this:
听起来这只是一个简单的目录问题。您是说 HTML 文件和 CSS 文件在同一文件夹中，对吗？然后像这样加载文件链接：
<link href="bootstrap.min.css" rel="stylesheet" media="all">
Else If your css file is in a "css" folder then change the directory to:
否则，如果您的 css 文件位于“css”文件夹中，则将目录更改为：
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
If worse comes to worse use the external link instead for troubleshooting:
如果情况变得更糟，请使用外部链接进行故障排除：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
回答by gogev
when you upload the bootstrap files to your hosting, make sure to upload ALL the files even the .map files. I did that and it worked for me.
当您将引导程序文件上传到您的主机时，请确保上传所有文件，甚至包括 .map 文件。我做到了，它对我有用。
回答by macromediax
I had the same problem and I solved it.
我有同样的问题，我解决了它。
open your file in windows notepad, choose save_as > Beside the Save button , open Encoding dropdown and choose UTF-8 !
在 Windows 记事本中打开您的文件，选择 save_as > 在保存按钮旁边，打开编码下拉菜单并选择 UTF-8 ！
my file was saved in Unicode Encoding. I used windows notepad to save-as my file in a UTF-8 Encoding and the issue was gone.
我的文件以 Unicode 编码保存。我使用 Windows 记事本将文件另存为 UTF-8 编码，问题就消失了。
you may also use notepad++ to change the encoding of a file. good luck
您还可以使用 notepad++ 来更改文件的编码。祝你好运
回答by jacob
I found this answer because it was the top google search yet I had this problem for a completely different reason.
我找到了这个答案，因为它是最热门的 google 搜索，但由于完全不同的原因我遇到了这个问题。
For those who might have made the same mistake I have, remember to add
对于那些可能犯过同样错误的人，记得添加
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
or some reference to another version of bootstrap so that your code knows where to get all the bootstrap related information
或对另一个版本的引导程序的一些引用，以便您的代码知道从哪里获取所有引导程序相关信息
