Bootstrap CSS 在 chrome 或 firefox 中不工作

Question

我写了一个基本的 "Hello World" 网页并从 CDN 添加了 bootstrap CSS，但它只能在 Microsoft Edge 中运行。 Google Chrome 和 Mozilla Firefox 未显示正确的输出。

请帮我解决这个问题。

更正 Microsoft Edge 输出

不正确GoogleChrome输出

<!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>

Answer 1

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

此问题是由于保存文件时实施了字符编码引起的。在 Atom 编辑器中，默认保存为 UTF-16LE。但是，UTF-8 是必需的。

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

Answer 2

使用这个页面结构，它适用于我的任何浏览器，它也可以在 bootstrap 网站上使用：

link: 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>

Answer 3

“超大屏幕”在 Bootstrap 5.

中不起作用

因此，如果我们遵循 Bootstrap 5 link - https://getbootstrap.com/docs/5.0/getting-started/introduction/

，此代码将不起作用

但是，如果我们遵循 Bootstrap 4 link - https://getbootstrap.com/docs/4.0/getting-started/introduction/

它仍然有效

Bootstrap CSS 在 chrome 或 firefox 中不工作

Bootstrap CSS not working in chrome or firefox

html

css

google-chrome

microsoft-edge

bootstrap-4