未应用引导样式表答案

【问题标题】：Bootstrap Stylesheet not applied未应用引导样式表
【发布时间】：2019-05-28 11:22:34
【问题描述】：

在我的一些页面上，我包含了引导程序。

现在在一页上，我有一个警报，由引导程序设置样式。

定义就这么简单：

 $('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role="alert">Falsches Passwort. Bitte erneut versuchen!</div>');

此外，之前还包含 Bootstrap css 文件：

<link rel="stylesheet" type="text/css" href="/bootstrapcss" />

bootstrapcss 被路由到正确的 css 文件。

在网络选项卡中，您可以看到加载引导程序工作正常：

而且，您也可以看到，即使它正在加载，也没有应用任何类。

现在，如果我将 bootstrap 的包含更改为 CDN，它就可以正常工作，并且可以完美应用这些类。

现在我不知道问题出在哪里，因为如您所见，引导程序正在加载，并且在这两种情况下，它都在加载，但只有从 CDN 加载时，才会应用样式。

有什么想法吗？

编辑：尝试后，如果我通过直接链接而不是通过路由器加载 CSS，它就可以工作。在另一个文件中，同一行工作正常，因此路由似乎工作正常（您可以看到，文件也已加载）

【问题讨论】：

我猜这是由于Content-type: text/css 标头，比如这个问题：CSS files ignored when using HTML5 doctype
你说得对，控制台说Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost/bootstrapcss"..... 那我该如何手动设置内容类型呢？`
@Kobi 当我删除 DOCTYPE 时，css 似乎已正确加载，即使控制台中的警告仍然存在
您需要将 HTTP 标头添加为路由的一部分，这取决于您的服务器。如果您使用静态文件主机和 .css 文件和 url，它可能会自动工作。
我找不到使用 AltoRouter 发送 HTTP 标头的方法，这是我正在使用的路由插件...我可能会使用它的完整路径或删除 DOCTYPE那么

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

根据 Kobi 在另一个帖子中的建议和回答，这是问题的答案：

使用这条路线：

$router->map('GET','/bootstrapcss','example.css','bootstrapcss'); And

然后在匹配时：

$match = $router->match();


 if($match['name'] === 'bootstrapcss'){
    header("Content-Type: text/css");
    $fileName = $match['target'];
    echo file_get_contents($fileName);
    return; }

完整答案是here。

再次感谢您的帮助！

【讨论】：

【解决方案2】：

你忘了重点，一定要在文件夹地址的第一个斜线之前：

&lt;link rel="stylesheet" type="text/css" href="./bootstrapcss" /&gt;

【讨论】：

再一次，如前所述，/bootstrapcss 被路由到正确的 css 文件
你能分享文件吗
问题已经解决了，我刚刚从另一个线程发布了答案，问题不是那里的路径，而是路由问题，因为路由器发送了错误的MIME-type。跨度>

【解决方案3】：

您在 html 中缺少文件扩展名

&lt;link rel="stylesheet" type="text/css" href="/bootstrap.css" /&gt;

【讨论】：

如前所述，/bootstrapcss 被路由到正确的 css 文件