Bootstrap 4自定义切换按钮无法修改背景色与边框色求助

自定义切换按钮的CSS修复 #

Bootstrap 4的.navbar-toggler默认样式优先级较高，直接写自定义样式容易被覆盖，用以下代码强制覆盖（确保自定义CSS在Bootstrap CSS之后加载）：

/* 设置切换按钮背景色与边框 */
.navbar-toggler {
  background-color: #0A0A0A !important;
  border-color: yellow !important;
}

/* 保留你已实现的黄色线条样式（如果采用背景图方式） */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='yellow' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

如果不想用!important，可以提升选择器优先级，比如用body .navbar-toggler，或者给导航栏添加自定义类后用.your-nav-class .navbar-toggler。

关于nav-light/nav-dark的疑问 #

不需要复制修改nav-light或nav-dark的全部代码。只需针对你需要自定义的导航栏元素（如链接颜色、背景等）单独写CSS覆盖即可。如果需要完全自定义导航栏风格，可以给<nav>标签加一个自定义类（比如.custom-nav），然后基于这个类写样式：

.custom-nav .navbar-nav .nav-link {
  color: #ffffff;
}

.custom-nav .navbar-nav .nav-link.active {
  color: yellow;
}

排查技巧 #

1. 确认自定义CSS文件在Bootstrap CSS之后引入，在Dreamweaver里检查CSS文件的加载顺序。
2. 按F12打开浏览器开发者工具，选中切换按钮，查看“样式”面板里哪些默认样式在覆盖你的自定义代码，调整选择器或增加优先级。
3. 刷新浏览器缓存（Ctrl+F5），避免Dreamweaver的缓存导致样式不更新。

内容的提问来源于stack exchange，提问作者Clare