bootstrap面包屑默认响应式，但多层级路径在手机上横向滚动或堆叠，根本原因是.breadcrumb的flex-wrap被覆盖失效；需确保结构为，检查flex-wrap:wrap、避免white-space:nowrap、禁用min-width、分隔符用伪元素生成且引号正确、长文本加word-break:break-word。
Bootstrap 面包屑默认就是响应式的，但多层级路径在手机上横向滚动、文字堆叠或分隔符错位，90% 不是框架不支持，而是结构或 CSS 覆盖破坏了 Flex 换行能力。
为什么 .breadcrumb 在小屏下不换行、只横向滚动
根本原因是 .breadcrumb 的 flex-wrap 被覆盖或失效。Bootstrap 5 默认设为 flex-wrap: wrap，但以下情况会让它退化成单行：
-
.breadcrumb或其父容器被其他 CSS 强制设了white-space: nowrap（常见于全局重置或第三方库） - 误用
display: inline-flex替代display: flex，导致flex-wrap完全无效 - 给
.breadcrumb-item设了min-width或固定width，阻止子项收缩换行 - 加了
overflow-x: auto或scroll，掩盖了换行失败的真实表现
用浏览器开发者工具检查 .breadcrumb 的 computed styles，确认 flex-wrap 值是 wrap，不是 nowrap 或 initial。
分隔符错位、消失或悬空在换行后
分隔符由 CSS 伪元素生成，依赖严格的 HTML 结构和选择器匹配。错位几乎都源于两方面：
- 用了
<ul></ul>替代<ol class="breadcrumb"></ol>：Bootstrap 5 的.breadcrumb > li + li::before只匹配<ol></ol>下相邻的<li>，<ul></ul>不触发 - 手动在 HTML 中写了
/或>：这会破坏语义，且与伪元素冲突；小屏换行后分隔符可能悬空或重复 - 自定义
--bs-breadcrumb-divider时用了错误引号：必须是英文双引号，如style="--bs-breadcrumb-divider: '>';"，写成单引号或中文引号无效 - 用 SVG 图标作分隔符时，漏掉
height: 1em和vertical-align: middle，基线对不齐，多行时明显偏移
长文本路径（如带 UUID 的 URL）在窄屏下断词难读
Flex 布局对内联元素（如链接文本）的换行策略较保守，超长单词或参数片段容易撑开容器。解决方式不是禁用换行，而是微调文本行为：
- 给
.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; } }
如何安全地自定义分隔符和颜色而不破坏响应式
别直接覆盖 .breadcrumb > li + li::before 或写暴力选择器如 .breadcrumb li a { color: red; }——这样容易漏状态、冲突深色模式、且未来版本可能失效。
- 优先改 CSS 变量：
--bs-breadcrumb-color、--bs-breadcrumb-active-color、--bs-breadcrumb-divider-color、--bs-breadcrumb-divider - 间距控制用
--bs-breadcrumb-padding-y和--bs-breadcrumb-item-padding-x，比直接调padding更稳定 - 若用 Sass，直接在变量文件里重定义这些值，编译后自动生效
- 注意 Bootstrap 3 不认识
--bs-*变量，抄 BS5 写法到旧项目会完全无效
最常被忽略的一点：响应式换行是否生效，永远先查结构——<nav aria-label="breadcrumb"></nav> 包裹 <ol class="breadcrumb"></ol>，每级是 <li class="breadcrumb-item">，末项无链接、有 aria-current="page"，其余全是可点击链接。结构错，后面所有样式调整都是徒劳。
