Bootstrap面包屑默认响应式，需用<nav aria-label="breadcrumb">包裹<ol class="breadcrumb">，子项为<li class="breadcrumb-item">且末项加active类；确保flex-wrap:wrap未被覆盖，避免white-space:nowrap或固定宽影响换行。
Bootstrap 面包屑默认就是响应式的，但需要正确结构
Bootstrap 的 breadcrumb 组件从 v5 开始就基于 Flex 布局 + flex-wrap 实现自动换行，无需额外写媒体查询。但前提是 HTML 结构必须合规，否则在小屏下会溢出或错位。
常见错误现象：breadcrumb 在手机上横向滚动、文字被截断、分隔符堆叠到一起。
- 必须用
<nav aria-label="breadcrumb">包裹，否则语义缺失且部分辅助工具不识别 -
<ol class="breadcrumb">是唯一合法容器，不能用<ul>或<div> - 每个层级必须是
<li class="breadcrumb-item">，且最后一个加active类 - 分隔符由 CSS 自动生成（
::before），不要手动插入/或>
移动端换行失效？检查是否误用了 inline-flex 或覆盖了 flex-wrap
Bootstrap 默认给 .breadcrumb 设了 display: flex 和 flex-wrap: wrap，但如果你或项目里其他 CSS 重写了这些属性，就会导致小屏下无法换行。
使用场景：定制主题时全局修改了 flex 相关样式，或引入了第三方 UI 库冲突。
- 用浏览器开发者工具检查
.breadcrumb元素的 computed styles，确认flex-wrap是wrap而非nowrap - 避免给
.breadcrumb设置white-space: nowrap—— 这会强制单行，直接破坏响应式 - 不要给
.breadcrumb-item设固定width或min-width，否则换行逻辑失效
如何让长文本面包屑在窄屏下更易读
默认情况下，长文本（比如带参数的 URL 片段）在小屏上换行后可能显得松散或断词奇怪，这不是 Bug，而是 Flex 布局对内联元素的自然处理方式。
性能 / 兼容性影响：纯 CSS 修复，无 JS 依赖，所有现代浏览器支持。
- 给
.breadcrumb-item加word-break: break-word，避免超长单词撑开容器 - 如需更紧凑，可加
font-size: 0.875rem（Bootstrap 的sm尺寸），但别小于0.75rem，否则可读性下降 - 慎用
text-overflow: ellipsis—— 它要求white-space: nowrap，会和换行冲突，只适合单行场景
自定义分隔符时，别破坏响应式基础
Bootstrap 允许通过 --bs-breadcrumb-divider CSS 变量替换分隔符，比如改成 "›" 或 SVG 图标。但图标尺寸、垂直对齐容易引发小屏错位。
常见错误现象：分隔符在换行后悬空、与文字基线不齐、图标被截断。
- 变量值必须是字符串或
url()，不能是带引号的 HTML 实体（如">"会失败，要用"\3E "） - 若用 SVG，确保
height和vertical-align与文字匹配，推荐设height: 1em和vertical-align: -0.125em - 避免在分隔符中使用绝对单位（如
px），否则缩放时比例失调
flex-wrap 给干掉了。 
