在 Bootstrap 4.6 的 Nav Tabs 中，为 Tab 面板（.tab-pane）添加 d-flex 等 display 工具类会破坏原生 tab 切换逻辑（因 !important 覆盖了 display: none/block），导致非激活 Tab 内容错位、宽度异常或无法铺满容器；正确做法是移除 .tab-pane 上的 display 类，改用嵌套容器 + 高度继承（h-100）+ overflow-auto 实现双列独立滚动。
在 bootstrap 4.6 的 nav tabs 中，为 tab 面板（`.tab-pane`）添加 `d-flex` 等 display 工具类会破坏原生 tab 切换逻辑（因 `!important` 覆盖了 `display: none/block`），导致非激活 tab 内容错位、宽度异常或无法铺满容器；正确做法是移除 `.tab-pane` 上的 display 类，改用嵌套容器 + 高度继承（`h-100`）+ `overflow-auto` 实现双列独立滚动。
在 Bootstrap 4.6 中构建响应式、可滚动的 Tab 内容区域（尤其是多列布局）时，一个常见但易被忽视的陷阱是：直接在 .tab-pane 元素上应用 d-flex、d-block 等 display 工具类。这是因为 Bootstrap 的 Tab 组件依赖 CSS 控制 .tab-pane 的显隐状态：
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block !important; }而 Bootstrap 的工具类（如 .d-flex）均带 !important 声明：
.d-flex { display: flex !important; }当 .tab-pane.active 同时拥有 d-flex 和 active 类时，display: flex !important 会强制覆盖 display: block !important —— 表面看似正常，但 Firefox、Edge 和 IE 等浏览器在计算 overflow: auto 时，会因 flex 容器未明确高度约束而失效，最终导致滚动条不出现，或内容溢出不可见。更严重的是，非激活的 .tab-pane（如 #profile、#contact）虽被设为 display: none，但若其本身是 display: flex，其子元素可能残留 flex 布局上下文，造成渲染偏移（如右移、缩窄），这正是提问中“Profile/Contact 内容右偏”的根本原因。
✅ 正确解决方案分三步：
- 移除所有 .tab-pane 上的 display 工具类（如 d-flex, d-block, d-inline）；
-
用语义化容器包裹内容：在每个 .tab-pane 内部添加 ，再嵌套，确保高度链完整传递；
- 在需要滚动的列内使用 overflow-auto + 显式高度控制：对双列中的每列（.col）内部的滚动区域，添加 flex-column + flex-grow-1 + overflow-auto，并配合 max-height: 0（兼容旧版浏览器滚动触发）。
以下是关键 HTML 结构精简示例（仅展示 #home Tab 的修复结构）：
<div class="tab-pane fade show active h-100" id="home" role="tabpanel"> <!-- ✅ 移除 d-flex，仅保留 h-100 --> <div class="container-fluid h-100"> <div class="row h-100"> <!-- 左列：可滚动内容 --> <div class="col d-flex flex-column"> <div class="row mb-2"> <div class="col"><button class="btn btn-primary">Search</button></div> </div> <div class="flex-grow-1 overflow-auto"> <div class="max-height-0 p-2"> <p>长文本内容...</p> <!-- 多段内容，超出即滚动 --> </div> </div> </div> <!-- 右列：同理 --> <div class="col d-flex flex-column"> <div class="row mb-2"> <div class="col"><h4>Title</h4></div> </div> <div class="flex-grow-1 overflow-auto"> <div class="max-height-0 p-2"> <p>另一列长文本...</p> </div> </div> </div> </div> </div> </div>? 配套 CSS 补充说明（必须保留）：
/* 确保 html/body 占满视口 */ html, body { height: 100%; } /* 兼容 Firefox/IE：max-height: 0 触发滚动条计算 */ .max-height-0 { max-height: 0; } /* 若需动态设置最大高度，可用 max-height-1: max-height: 100%; */⚠️ 注意事项：
- 所有父级容器（.container-fluid, .row, .col, .tab-pane）必须严格继承 h-100，中断任一环将导致 flex-grow-1 或 overflow-auto 失效；
- 避免在 .tab-pane 上写内联 style="display:..."，以免与 JS 切换逻辑冲突；
- 若使用自定义高度（如 h-75），请统一替换所有 h-100 并确保祖先链一致；
- Bootstrap 4.6 不支持 min-height: 0 的 flex 子项收缩，故 max-height-0 是必要兜底方案。
✅ 最终效果：所有 Tab（Home / Profile / Contact）内容均左对齐、100% 宽度填充，双列各自独立滚动，无偏移、无截断，全浏览器兼容。
