Bootstrap多层级面包屑在手机上横向滚动或文字堆叠，根本原因是.breadcrumb的Flex换行能力被破坏；需检查flex-wrap是否为wrap、HTML结构是否为<ol>、分隔符是否用伪元素正确生成、长文本是否启用word-break及当前页是否仅末项加active和aria-current="page"。
Bootstrap 面包屑天然响应式，但多层级路径样式出问题，90% 是结构或 CSS 覆盖导致的换行失效或分隔符错位，不是版本不支持。
为什么多层级面包屑在手机上横向滚动或文字堆叠
根本原因是 .breadcrumb 的 Flex 换行能力被破坏。Bootstrap 5 默认设了 display: flex 和 flex-wrap: wrap，但以下任意一项都会让它退化为单行：
-
.breadcrumb被其他 CSS 强制设为white-space: nowrap（常见于全局重置或第三方库） - 父容器或自身加了
overflow-x: auto或scroll，掩盖了换行失败的真实表现 - 误用
inline-flex替代flex，导致flex-wrap失效 - 给
.breadcrumb-item设了min-width或固定width，阻止子项收缩换行
用浏览器开发者工具检查 .breadcrumb 的 computed styles，确认 flex-wrap 值是 wrap，不是 nowrap 或 initial。
多层级路径下分隔符错位或消失
分隔符由 CSS 伪元素生成，依赖严格的 HTML 结构和选择器匹配。错位通常源于两方面：
- 用了
<ul>替代<ol class="breadcrumb">：Bootstrap 5 的.breadcrumb > li + li::before选择器只匹配<ol>下相邻的<li>，<ul>不触发 - 手动在 HTML 中写了
/或>：这会破坏语义，且与 CSS 伪元素冲突，小屏换行后分隔符可能悬空或重复 - 自定义
--bs-breadcrumb-divider时用了错误引号：必须是英文双引号，如style="--bs-breadcrumb-divider: '>';"，写成单引号或中文引号无效
SVG 图标作分隔符时，记得加 height: 1em 和 vertical-align: middle，否则基线对不齐，尤其在多行换行时明显偏移。
长文本路径在窄屏下断词难读
默认 Flex 布局对内联元素（如链接文本）的换行策略较保守，超长单词或 URL 片段容易撑开容器。解决方式不是禁用换行，而是微调文本行为：
- 给
.breadcrumb-item加word-break: break-word，强制在单词内断行（适合含参数的路径如/api/v1/users/1234567890abcdef） - 避免
text-overflow: ellipsis：它要求white-space: nowrap，与响应式换行互斥；真要截断，得用 JS 动态折叠中间项 - 小屏下调小字体更有效：
@media (max-width: 576px) { .breadcrumb { font-size: 0.875rem; } }，但别低于0.75rem，否则可读性骤降
注意：不要给 .breadcrumb-item a 单独设 display: block 或 width: 100%，这会干扰 Flex 子项的自然流式布局。
当前页高亮失效或语义缺失
加了 class="active" 却没高亮，大概率是漏了 aria-current="page" 或结构嵌套错误：
- 当前页项必须是最后一个
<li class="breadcrumb-item active">，且内部不能有<a>标签（应为纯文本） - 必须同时存在
class="active"和aria-current="page"：前者触发样式，后者让屏幕阅读器识别当前位置 -
<nav aria-label="breadcrumb">是硬性包裹要求，缺了它，部分辅助技术无法将整个结构识别为导航 - 如果用了 Sass 自定义编译，检查是否覆盖了
$breadcrumb-active-color变量但忘了同步更新--bs-breadcrumb-active-colorCSS 变量
最易忽略的是：多层级路径中，中间某级若也加了 active 类，会导致样式错乱——只有末项能加。
