如何更改 Bootstrap 5 導航欄按鈕邊框和圖標顏色？

Question

我需要在 Bootstrap 5 導航欄菜單按鈕上使用自定義顏色 (#760822)。

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle">
            <span class="navbar-toggler-icon"></span>
        </button>
        .
        .
        .
    </div>
</nav>

通過執行以下操作，我已將默認邊框顏色更新為 #760822：

.navbar-light .navbar-toggler {
    border-color: #760822;
}

有誰知道如何在單擊菜單時更改粗邊框顏色，以及如何更改其中3條水平線的顏色？

 .navbar-light .navbar-toggler { border-color: #760822; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle"> <span class="navbar-toggler-icon"></span> </button> </div> </nav>

Answer 1

您只需要一個更具體的選擇器。 這可能是因為您在 Bootstrap 的樣式表之前加載了自定義樣式。 通常將body添加到前面可以解決問題，但反轉加載順序也可以解決問題。

因為圖標是一個 SVG 文件，所以不能簡單地通過 CSS 進行更改。 例如，您需要切換到 Font Awesome 圖標，並使用color屬性設置樣式。 請參閱如何更改 Bootstrap 4 導航欄按鈕圖標顏色？ .

 body .navbar-light .navbar-toggler { color: #760822; border-color: #760822; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle"> <i class="fas fa-bars"></i> </button> </div> </nav>

Answer 2

在 bootstrap 5 上，粗邊框是由於以下 CSS 類，特別是 box-shadow 樣式：

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0.25rem;
}

在不更改原始 Bootstrap 類的情況下，我在我的自定義 CSS 文件中按如下方式覆蓋了它，該文件是在引導 CSS 文件之后加載的：

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}