bootstrap面包屑默认支持响应式多层级，问题90%源于结构错误或css覆盖导致flex-wrap失效；需确保使用、正确aria属性、避免white-space:nowrap等破坏换行的行为。
Bootstrap 的面包屑默认就支持响应式多层级，但实际项目中出问题，90% 是结构写错或 CSS 覆盖导致换行失效，不是框架不支持。
为什么手机上横向滚动或文字堆叠
根本原因是 .breadcrumb 的 flex-wrap 被破坏了。Bootstrap 5 默认设了 display: flex 和 flex-wrap: wrap，但以下任意一项都会让它退化为单行：
-
.breadcrumb被其他 CSS 强制设为white-space: nowrap（常见于全局重置或第三方库） - 父容器或自身加了
overflow-x: auto，掩盖了换行失败的真实表现 - 误用
inline-flex替代flex，导致flex-wrap失效 - 给
.breadcrumb-item设了min-width或固定width，阻止子项收缩换行
用浏览器开发者工具检查 .breadcrumb 的 computed styles，确认 flex-wrap 值是 wrap，不是 nowrap 或 initial。
分隔符错位或消失的常见原因
分隔符由 CSS 伪元素生成，依赖严格的 HTML 结构和选择器匹配。错位通常源于两方面：
- 用了
<ul></ul>替代<ol class="breadcrumb"></ol>：.breadcrumb > li + li::before只匹配<ol></ol>下相邻的<li>，<ul></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; } }
结构合规性检查清单
再强调一遍：响应式生效的前提是结构正确，缺一不可：
- 必须用
<nav aria-label="breadcrumb"></nav>包裹，否则语义缺失且部分辅助工具不识别 -
<ol class="breadcrumb"></ol>是唯一合法容器，不能用<ul></ul>或<div> <li>每个层级必须是 <code><li class="breadcrumb-item">，且最后一个加active类和aria-current="page" - 分隔符由 CSS 自动生成（
::before），不要手动插入/或>
真正容易被忽略的是 aria-current="page" —— 它不只是视觉样式开关，还影响屏幕阅读器播报逻辑，漏掉会导致可访问性降级。
