Question

我写了一个基本的＆＃34; Hello World＆＃34;网页并从CDN添加了bootstrap CSS，但它仅在Microsoft Edge中有效。 Google Chrome和Mozilla Firefox未显示正确的输出。

请帮我解决这个问题。

Correct Microsoft Edge Output

更正Microsoft边缘输出

Incorrect Google Chrome Output

Google Chrome输出不正确

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

使用这个页面结构，它适用于任何浏览器，它也可以在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 2

我终于找到了问题的解决方案!!

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

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

Answer 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/

，它仍然可以工作

Bootstrap CSS无法在chrome或firefox中运行

3 个答案: