Bootstrap CSS 在 chrome 或 firefox 中不起作用答案

【问题标题】：Bootstrap CSS not working in chrome or firefoxBootstrap CSS 在 chrome 或 firefox 中不起作用
【发布时间】：2017-11-08 23:03:23
【问题描述】：

我编写了一个基本的“Hello World”网页并从 CDN 添加了引导 CSS，但它仅适用于 Microsoft Edge。 Google Chrome 和 Mozilla Firefox 未显示正确的输出。

请帮我解决这个问题。

正确的 Microsoft Edge 输出

谷歌浏览器输出不正确

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>Shadow Shop</title>
  </head>
  <body class="container-fluid">
    <div class="jumbotron">
      <h1>Hello World</h1>
    </div>

  </body>
</html>

【问题讨论】：

您看起来使用的是 bootstrap 3 而不是 4 - 认为您的标签是错误的。此外，对我来说似乎在 chrome 中工作正常：bootply.com/cqFLpVr9yN
而浏览器控制台有什么要说的？ // 您可能应该使用本地 Web 服务器通过 HTTP 进行测试，而不仅仅是通过文件系统。
CSS 加载对我来说很好。至于 JS，Bootstrap 要求在 Bootstrap 的 JS 之前包含 jQuery。
这可能与“HTML Project”目录中的空间有关。然而，正如 CBroe 指出的那样，通过文件系统测试网站充其量是不确定的。在大多数情况下，如果您通过文件系统使其工作，它将停止在 Web 服务器上工作，而后者很可能是您希望它工作的方式。此外，很多网络技术很可能无法通过文件系统工作。
好的。我将使用本地 Web 服务器即 WAMP 进行尝试。感谢@CBroe 和 AndreiGheorghiu 的提示。

标签： html css google-chrome microsoft-edge bootstrap-4

【解决方案1】：

我终于找到了解决问题的方法！！

这个问题是由于在保存文件时执行了字符编码造成的。在 Atom 编辑器中，默认保存为 UTF-16LE。但是，UTF-8 是必需的。

一旦我更改了编码，问题就解决了。

【讨论】：

【解决方案2】：

使用这个页面结构，它适用于任何浏览器，它也可以在引导站点上找到：

链接：https://getbootstrap.com/docs/4.0/getting-started/introduction/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：

【解决方案3】：

“jumbotron”在 Bootstrap 5 中不起作用。

How to create jumbotron in Bootstrap 5?

因此，如果我们按照 Bootstrap 5 链接 - https://getbootstrap.com/docs/5.0/getting-started/introduction/，此代码将无法工作

但是，如果我们遵循 Bootstrap 4 链接 - https://getbootstrap.com/docs/4.0/getting-started/introduction/，它仍然可以工作

【讨论】：