小屏下按钮文字应使用visually-hidden配合响应式类（如visually-hidden-sm d-md-inline）实现视觉隐藏但保留可访问性，图标需加aria-hidden="true"，并确保与文字并列包裹于按钮内，避免d-none误用。
按钮内文字怎么在小屏下隐藏但保持可访问性
直接用 d-none 隐藏文字会切断屏幕阅读器读取，按钮变成“无名图标”，违反 WCAG。必须用 visually-hidden 配合响应式类，让文字对人眼不可见、但对辅助技术可见。
-
visually-hidden是 Bootstrap 5 内置类，仅视觉隐藏，DOM 和可访问树仍完整 - Bootstrap 5.3+ 支持
visually-hidden-sm（小屏隐藏），旧版需写成visually-hidden d-sm-inline - 图标必须加
aria-hidden="true"，否则读屏可能读出 Unicode 名或冗余描述 - 文字和图标要并列包裹在按钮内，别套在
span或div里再加类，避免层级干扰显隐逻辑
图标和文字的响应式显示组合怎么写才不翻车
目标是「小屏只显图标、大屏图标+文字」，不是简单切换 display，而是双向控制：图标始终可见，文字按断点显隐。错误写法是给 <i></i> 加 d-md-none——这会让图标在中屏就消失。
- 图标保留原样，加
me-1（或ms-1）留出文字间距，再加aria-hidden="true" - 文字用
visually-hidden visually-hidden-sm d-md-inline（5.3+）或visually-hidden d-sm-inline（5.2 及以下） - 别把
d-none和visually-hidden混用，前者彻底移除渲染流，后者才是语义正确的“视觉隐藏” - 如果项目改过断点值（比如把
md改成 800px），d-md-inline就不会按预期生效，得查当前编译后的 CSS 变量
小屏下按钮高度异常、图标错位怎么办
文字被 visually-hidden 后仍占文档流空间，但行高、换行、padding 可能导致按钮撑高或图标偏移，尤其在窄屏（如 iPhone SE）上明显。
- 给按钮加
text-nowrap，防止文字在小屏换行顶高容器 - 图标用
<i class="bi bi-search"></i>时，确保 Bootstrap Icons 已加载；若用自定义 SVG，务必设width="1em" height="1em"，否则小屏下空白高度不一致 - 避免父容器有
flex+align-items: center却没约束子项高度，图标和文字基线对不齐会导致视觉偏移 - 测试时用 Chrome DevTools 切到 iPhone SE（375px）或 Nexus 5X（412px），别只看 768px 断点模拟
为什么 navbar-toggler 点击后菜单不自动收起
这不是按钮图标问题，但常被一起遇到：小屏点击导航链接后，折叠菜单仍开着，遮挡内容。根本原因是 Bootstrap 的 collapse 不监听 a 点击事件，得手动触发收起。
- 给所有导航链接加
data-bs-toggle="collapse" data-bs-target="#navbarNav"，让点击即触发收起 - 或者用 JS 绑定：
document.querySelectorAll('#navbarNav a').forEach(el => el.addEventListener('click', () => bootstrap.Collapse.getInstance(document.getElementById('navbarNav'))?.hide())) - 注意
data-bs-target必须精确匹配折叠容器的 ID，大小写、符号一个都不能错 - 如果用了 offcanvas 替代 collapse，对应方法是
bootstrap.Offcanvas.getInstance(...)?.hide()
visually-hidden 不是 d-none 的快捷写法，它背后绑着可访问性链路；一旦漏掉 aria-hidden="true" 或写错断点版本，窄屏下的按钮就既不好看，也不好用。
