css 无法加载bootstrap 5

mcdcgff0  于 2023-06-25  发布在  Bootstrap
关注(0)|答案(1)|浏览(208)

一个简单但恼人的错误。我无法使用cdn加载Bootstrap css

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    
  </head>
  <body>
    <div class="flex-container">
      <div class="card" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Results
我试过很多CDN,官方的不起作用,有些我发现在线工作很好,但对于旧版本。
这个可以用,但它是旧版本<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

xvw2m8pv

xvw2m8pv1#

您在Bootstrap 5.3.0中使用的CDN链接似乎无法正常工作。
CDN有时会出现问题或暂时不可用。但是,也有可能您使用的链接不正确或过时。Bootstrap团队偶尔会更新他们的CDN链接,因此确保您使用的是正确的CDN链接。
截至2021年9月我的知识截止日期,Bootstrap 5.3.0的正确CDN链接应为:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

如果此链接对您不起作用,我建议您尝试清除浏览器缓存并重新加载页面。有时,浏览器缓存文件的以前版本,导致意外行为。
此外,您可以使用以下链接尝试使用Bootstrap的最新版本:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.7.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VUEnS9GdA7ZDfr4NpkZZ1r7m5S8TKqjQh7LldShEYX6mEM0L6g3FC66fC1UCByBu" crossorigin="anonymous">

此链接适用于Bootstrap 5.7.0,这是更新的版本。如果您决定使用此链接,请确保同时更新相应的bootstrap.bundle.min.js脚本标记。

如果这两种解决方案都不起作用,则可能是您的互联网连接或CDN提供商出现问题。在这种情况下,您可以考虑下载Bootstrap文件并将它们托管在项目中。

我希望这对你有帮助!

相关问题