我的引导代码在 codeply 在线编译器中工作，但在 VS 代码中不起作用答案

【问题标题】：My bootstrap code works in codeply the online compiler but does not work in VS code我的引导代码在 codeply 在线编译器中工作，但在 VS 代码中不起作用
【发布时间】：2022-08-08 00:27:29
【问题描述】：

<nav class=\"navbar navbar-expand-lg navbar-dark bg-dark\">
        <a class=\"navbar-brand\" href=\"\">Tindog</a>
        <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarTogglerDemo01\" aria-controls=\"navbarTogglerDemo01\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
            <span class=\"navbar-toggler-icon\"></span>
        </button>
        <div class=\"collapse navbar-collapse\" id=\"navbarTogglerDemo01\">
            <ul class=\"navbar-nav ms-auto\">
                <li class=\"nav-item\">
                    <a class=\"nav-link\" href=\"\">Contact</a>
                </li>
                <li class=\"nav-item\">
                    <a class=\"nav-link\" href=\"\">Pricing</a>
                </li>
                <li class=\"nav-item\">
                    <a class=\"nav-link\" href=\"\">Download</a>
                </li>
            </ul>
        </div>
    </nav>

也许您没有启用引导程序或做错了，因为在在线编译器中它会自动启用

标签： html css bootstrap-4

【解决方案1】：

确保您将引导程序包含为 CDN（就像我在下面的示例中所做的那样）或通过链接到您将在标头中执行的 bootstrap.css 文件在本地包含。

对于导航栏中的某些元素，您还需要在页面底部包含引导 js。再次作为 CDN（我也将其放入）或再次本地链接 bootstrap.js 文件

我希望sn-p有帮助

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="">Tindog</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

您需要链接引导程序或您在本地计算机中使用的任何其他 cdns..

尝试这个..

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="">Tindog</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">Download</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

【讨论】：

【解决方案3】：

我正在做同一个项目，我复制并粘贴了这两个代码，但它仍然无法正常工作。请问我可以帮忙吗

【讨论】：