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 属性设置样式。见How can I change the Bootstrap 4 navbar button icon color?。

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>

如何更改 Bootstrap 5 导航栏按钮边框和图标颜色？

1 个答案: