Bootstrap 4 navbar居中、toggler按钮及Home样式异常问题求助

1. Navbar 无法居中（始终左对齐） #

Bootstrap 4 的 navbar 默认采用 flex 布局，text-align-center 这类文本对齐类无法直接生效，需针对 flex 容器调整：

• 若要让导航菜单居中，给 .navbar-nav 添加 mx-auto 类（左右 margin 自动分配），确保 navbar 本身保持 flex 布局（Bootstrap 默认已配置）。
• 若需让品牌和菜单整体居中，将两者放入同一个容器，给容器添加 justify-content-center 类。
  示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container justify-content-center">
    <a class="navbar-brand" href="#">Brand</a>
    <div class="navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <!-- 其他菜单项 -->
      </ul>
    </div>
  </div>
</nav>

2. Home 按钮始终保持 hover 蓝色（无法恢复默认黄色） #

核心是样式优先级冲突，Bootstrap 内置的 .nav-link.active 或 hover 样式优先级高于自定义样式，可通过以下方式解决：

• 提升自定义样式的选择器层级，比如用 .navbar-nav .nav-link:not(.active) 设置默认黄色，用 .navbar-nav .nav-link:hover 定义 hover 蓝色。
• 临时可使用 !important（不推荐长期依赖，但新手可快速验证）。
  示例 CSS：

/* 默认状态 */
.navbar-nav .nav-link {
  color: #ffc107; /* 黄色 */
}
/* hover 状态 */
.navbar-nav .nav-link:hover {
  color: #007bff; /* 蓝色 */
}
/* 激活状态（若需保留黄色） */
.navbar-nav .nav-link.active {
  color: #ffc107;
}

同时检查 Home 按钮是否误加了 .active 类，导致持续显示激活态样式。

3. Toggler 按钮样式不一致问题 #

两个页面仅 toggler 代码不同却出现差异，是因为未覆盖 Bootstrap toggler 的全状态样式，需统一处理默认、hover、focus、active 状态：

• 确保自定义样式覆盖 navbar-toggler 的所有伪类，同时处理汉堡图标的颜色切换。
  示例 CSS：

.navbar-toggler {
  border-color: #ffc107; /* 默认边框黄色 */
}
.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler:active {
  border-color: #007bff; /* 交互状态边框蓝色 */
  outline: none; /* 移除默认焦点轮廓 */
}
/* 默认汉堡图标颜色 */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 193, 7, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* 交互状态汉堡图标颜色 */
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:focus .navbar-toggler-icon,
.navbar-toggler:active .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 123, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

同时检查两个页面的 toggler HTML 结构，确保没有额外类或属性差异（比如是否遗漏 data-toggle 属性）。

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