為什么Bootstrap5導航欄不折疊？-有解無憂

我嘗試用 sass 編譯 Bootstrap 5，但我想我錯過了匯入一些 scss 檔案。如果我添加<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">導航欄折疊很好，但是當我添加我編譯的 css 檔案時導航欄沒有折疊。

這是我的導航條代碼

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="{{site.baseurl}}">
      Workshop
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <!-- navlinks -->
      </ul>
    </div>
  </div>
</nav>

這是我的 main.scss 代碼

// PATHS ARE TRUE
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";

// 4. Include any optional Bootstrap CSS as needed
// I GUEST MISSING IN HERE
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/helpers";
@import "../../node_modules/bootstrap/scss/nav";
@import "../../node_modules/bootstrap/scss/navbar";
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/tables";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/card";

// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../../node_modules/bootstrap/scss/utilities/api";

// 6. Add additional custom code here

這是我的 index.html

<!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.0">
  <link rel="stylesheet" href="{{site.baseurl}}/assets/css/main.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <title>{{site.title}}</title>
  <link rel="icon" type="image/x-icon" href="{{site.baseurl}}/assets/images/favicon.ico">
</head>

<body>
  {{content}}

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
    crossorigin="anonymous"></script>
</body>
</html>

為什么我的導航欄沒有折疊？我必須匯入哪些 scss 檔案？我已經閱讀了這些檔案，但我遺漏了一些東西。無法修復。請幫忙。
謝謝

為什么 Bootstrap 5 導航欄不折疊？

uj5u.com熱心網友回復：

您也需要添加此檔案

@import "../../node_modules/bootstrap/scss/transitions";

uj5u.com熱心網友回復：

為導航欄提供一個 id 并通過手動提供來更改樣式，它對我有用

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429630.html

標籤：html css 推特引导粗鲁的引导程序 5

上一篇：為什么我的Bootstrap拉伸鏈接會延伸到多個級別？

下一篇：我怎樣才能使這個進度條移動和桌面回應