【问题标题】:class="jumbotron" in bootstrap not working引导程序中的 class="jumbotron" 不起作用
【发布时间】:2021-06-30 02:16:22
【问题描述】:

这是我第一次尝试引导程序。除了 class jumbotron 不起作用之外,一切似乎都已到位。类容器工作并在中心带来内容,但假设提供一些背景的 jumbotron 似乎不起作用。 (像 class="jumbotron" 这样添加或删除对页面没有影响。)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>My first Bootstrap website!</h1>
        <p>This page will grow as we add more and more components from Bootstrap...</p>
      </div>

      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="./js/bootstrap.min.js"></script>
  </body>
</html>

我附上了 ide 的 ,这样你就可以看到我的文件树了。我自己也检查了一下,似乎我已经正确加载了所有内容。

更新:重新下载引导程序使用完全相同的代码解决了问题。不知何故,我的第一次下载无法正常工作。

【问题讨论】:

  • 你得到bootstrap js文件了吗?看起来你只有 css。
  • @Takendarkk 在第 23 行
  • 好的,然后做一个演示这个的小提琴。我的小提琴工作得很好here。由于您似乎已经下载了引导程序,因此您应该检查开发人员控制台并确保它实际上已应用于页面并且 css 类正在应用它们的属性。
  • 我猜你的 .css 或 .js 文件有问题。尝试重新下载它,或者在链接到托管(而不是本地)版本时查看它是否有效
  • @Parker 是的,使用完全相同的 index.html 文件重新下载引导程序可以解决问题。这以前从未发生过,但似乎我的第一次下载已损坏

标签: css twitter-bootstrap twitter-bootstrap-3


【解决方案1】:

试试:

<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">

没有 ./ 代替。

或 CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

【讨论】:

  • 您是否尝试过使用CDN? maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  • 重新下载引导程序并尝试相同的 html 文件解决了问题。
【解决方案2】:

尝试使用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

在您的 HTML 头中。

【讨论】:

  • 您还应该解释为什么需要进行此更改。最好带有一些文档链接。
猜你喜欢
  • 2014-06-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多