个人中心
gpt4 book ai didi

Bootstrap color classes, icons, and dropdown not working(引导程序颜色类、图标和按钮不工作)

转载 作者：bug小助手 更新时间：2023-10-26 20:53:51 28 4
gpt4 key购买 nike



I have been trying to use bootstrap classes like bg-body-tertiary, or bg-secondary-subtle, as well as the dropdown functions and the icons. When I try to test code from the manual it doesn't appear the same as in the website. For example...

我一直在尝试使用引导类，比如BG-Body-Third，或BG-Second-Delivery，以及下拉函数和图标。当我尝试测试手册中的代码时，它看起来与网站中的不同。比如..。




<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- link rel="stylesheet" href="styles.css" -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-secondary-subtle">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>




shows as:

显示为：


navbar


Does anyone know how to solve this?

有人知道怎么解决这个问题吗？


I tried verifying that I did have the version 5 installed and that the JavaScript and popper files were also correctly implemented in the code. It didn't change the display.

我尝试验证我确实安装了版本5，并且在代码中也正确地实现了JavaScript和Popper文件。这并没有改变显示效果。


更多回答

Those classes were introduced in 5.3. You'll notice that they aren't even in the docs for 5.2. Be sure you're following the correct docs. Why are you loading two different library file versions, one of which is a very old beta, though? Time to upgrade.

这些课程是在5.3年引入的。您会注意到，它们甚至没有出现在5.2版本的文档中。确保您遵循的是正确的文档。为什么要加载两个不同的库文件版本，其中一个是非常旧的测试版？是时候升级了。

优秀答案推荐

Copy-paste the stylesheet into your before all other stylesheets to load our CSS

复制-在所有其他样式表之前将样式表粘贴到中，以加载我们的css


It seems you put your css style on top of bootstrap style

看起来你把你的css风格放在了引导风格之上。


更多回答

You're right that it's best to load a custom stylesheet after Bootstrap, but that's not the problem here.

您说得对，最好在Bootstrap之后加载一个定制样式表，但这不是问题所在。

28 4 0
文章推荐： Can nodejs read project file in Electron application?()
文章推荐： Why can't I use a reference to a `Bump` after a call to `reset`?(为什么不能在调用`Reset`之后使用对`Bump`的引用？)
文章推荐： Repeatedly using randperm until a standard is met always gives duplicate results on two consecutive runs(重复使用RANDERM，直到达到标准，在连续两次运行中总是会得到重复的结果)
文章推荐： Rails: Active Storage not uploading files(Rails：活动存储不上载文件)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com