在 Bootstrap 4 中，.active 类实际作用于 .nav-item 容器而非 .nav-link 元素，因此需通过 .nav-item.active .nav-link 选择器精准定位并覆盖样式，才能将激活态标签背景设为白色。

在 bootstrap 4 中，`.active` 类实际作用于 `.nav-item` 容器而非 `.nav-link` 元素，因此需通过 `.nav-item.active .nav-link` 选择器精准定位并覆盖样式，才能将激活态标签背景设为白色。

要实现导航标签页（Tabs）中“激活项”背景色为白色的效果，关键在于理解 Bootstrap 4 的 DOM 结构与 CSS 优先级机制。默认情况下，Bootstrap 将 .active 类添加到

上，而非 内部元素——这意味着直接写 .nav-link.active 无法命中真实激活状态，导致样式失效。

✅ 正确做法是使用后代选择器：

.nav-tabs .nav-item.active .nav-link {
  background: white;
  color: #0062cc; /* 与主色协调的文本色 */
  border: 2px solid #0062cc;
  width: 100px;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

同时注意以下几点：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 移除原 .nav-link.active 规则：避免与新规则冲突；
• 确保 JS 初始化完整：需引入 jQuery、Bootstrap JS 及其依赖（如 Popper.js），否则 data-toggle="pill" 不生效；
• HTML 结构保持规范：.nav-item 必须包裹 .nav-link，且 .active 类应置于
• 上（Bootstrap 自动管理，无需手动添加到 ）；

完整示例结构如下：

<!-- 引入资源（按顺序） -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script><!-- 导航容器 --><div class="col-md-9 register-right">
  <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item active"> <!-- ✅ active 加在 li 上 -->
      <a class="nav-link" id="home-tab" data-toggle="pill" href="#home" role="tab">Buyer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="pill" href="#profile" role="tab">Seller</a>
    </li>
  </ul>
</div>

? 提示：若使用 Sass 或构建工具，建议将自定义样式置于 Bootstrap 主样式之后，或通过 !important（仅作兜底）确保覆盖。但更推荐提升选择器特异性（如上述 .nav-item.active .nav-link），兼顾可维护性与语义清晰性。