HTML中CDN样式文件链接失效，页面未应用指定样式求助

你的代码里Bootstrap样式没生效的核心原因是引用的CSS文件MIME类型不正确。raw.githubusercontent.com提供的原始文件默认会被浏览器识别为text/plain，但浏览器要求样式表必须是text/css类型，所以它会忽略这个样式表，导致Bootstrap的样式无法加载。

这里给你几个可行的解决方案：

1. 使用官方/靠谱的CDN链接替换原链接 #

Bootstrap 3有官方维护的CDN，直接用这个链接就能正常加载样式：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

CDN不仅能保证MIME类型正确，还能提供更快的加载速度，对用户体验更友好。

2. 修复仓库文件的访问方式（如果非要用自己的文件） #

如果坚持要使用GitHub仓库里的Bootstrap文件，你可以把仓库部署到GitHub Pages上，这样访问文件时会自动返回正确的text/css MIME类型，样式就能正常加载了。

3. 顺便优化重复的viewport标签 #

你的代码里重复定义了viewport meta标签，虽然这不是样式不加载的直接原因，但可能会导致移动端渲染的潜在问题，建议合并成一个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

修改后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demo </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class='container'>
        <h1>nofacebook </h1>
        <h4 align="right"></h4>
        <ul class="nav nav-pills ct-blue">
            <li><a href="/">Home</a></li>
            <li><a href="/register/">Register</a></li>
            <li><a href="/login/">Login</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/contact/">Contact</a></li>
        </ul>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Nikunj Gupta