当在 Bootstrap 页脚中嵌套 nav-tabs 时，若外层误用 navbar 类（如 ），会触发 Bootstrap 内置的 navbar 样式重置（如 justify-content: space-between、align-items: center 等），导致 Tab 内容区域在激活状态切换时因 flex 布局重新计算而发生意外水平偏移。移除冗余的 navbar 类即可根本解决。

当在 bootstrap 页脚中嵌套 `nav-tabs` 时，若外层误用 `navbar` 类（如 `

`），会触发 bootstrap 内置的 navbar 样式重置（如 `justify-content: space-between`、`align-items: center` 等），导致 tab 内容区域在激活状态切换时因 flex 布局重新计算而发生意外水平偏移。移除冗余的 `navbar` 类即可根本解决。

你遇到的问题——点击第二个 Tab 时整个 .tab-content 区域突然向左偏移——并非 Tab 组件本身的行为异常，而是外层容器 CSS 类冲突所致。

核心原因在于：
你将 <footer></footer> 同时赋予了 navbar 和 navbar-dark bg-dark 类。虽然视觉上看起来“像一个深色页脚”，但 navbar 是 Bootstrap 中一个功能完备的布局组件类，它会强制启用以下默认行为：

• display: flex
• flex-wrap: nowrap
• justify-content: space-between
• align-items: center
• 自动处理子元素的内边距、对齐与响应式收缩逻辑

而你的结构中，.nav-tabs 和 .tab-content 被并列放在同一行（<div class="col-6"> 内），当 Tab 切换时，Bootstrap 的 tab JS 会动态切换 <code>.tab-pane.show.active 的显隐状态。此时，若父容器是 navbar，其 flex 引擎会因 .tab-content 高度变化（例如从 height: auto → height: 0 或反之）、内部块级元素渲染差异，重新计算主轴对齐，最终表现为内容“被拉向左侧”。

✅ 正确解法：剥离语义错误的 navbar 类

<!-- ❌ 错误：滥用 navbar 类于非导航栏容器 -->
<footer class="navbar navbar-dark bg-dark text-light">
  <!-- ... -->
</footer>

<!-- ✅ 正确：仅保留语义匹配的工具类 -->
<footer class="bg-dark text-light py-4">
  <div class="container mt-5">
    <div class="row">
      <div class="col-6">
        <span class="h1 text-white m-2">Mijn Blog</span>
      </div>
      <div class="col-6">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#pills-about">About Me</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#pills-contact">Contact</a>
          </li>
        </ul>
        <div class="tab-content mt-3" id="pills-tabContent">
          <div class="tab-pane fade show active text-white" id="pills-about" role="tabpanel">...</div>
          <div class="tab-pane fade text-white" id="pills-contact" role="tabpanel">...</div>
        </div>
      </div>
    </div>
  </div>
</footer>

? 关键改进点：

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

• 移除 <footer></footer> 上的 navbar 和 navbar-dark —— 它们专用于顶部/侧边主导航，不适用于页脚信息区块；
• 使用语义清晰的工具类替代：bg-dark text-light py-4 控制背景、文字色与垂直内边距；
• 为 .tab-content 添加 mt-3，避免与 Tabs 标签紧贴，提升可读性；
• 所有 aria-* 和 data-bs-* 属性保留，确保无障碍与交互功能不受影响。

? 补充建议：

• 若需页脚具备导航栏的响应式折叠能力（如移动端收起为汉堡菜单），应改用 navbar + navbar-expand-* 并重构为标准导航结构，而非强行套用于信息型页脚；
• 永远遵循「类即契约」原则：Bootstrap 每个预设类都隐含一套样式契约，混用易引发不可预期的布局副作用。

至此，Tab 切换将不再引发容器位移，内容区域稳定居右，符合设计预期。