应将文字包进，图标单独用或，按钮结构为文字，确保小屏隐藏文字、中屏及以上显示，且不破坏flex布局。
按钮文字在小屏下隐藏、只留图标怎么写
直接用 text-sm-down-none 这类类名是错的 —— bootstrap 5 没提供“仅对按钮内文字响应式隐藏”的内置工具类。必须靠自定义 css + 结构控制，否则图标会偏移、点击区域缩水、或文字残留空白。
核心思路是：把文字包进一个带响应式隐藏类的 <span></span>，图标单独放（<i></i> 或 <svg></svg>），再用 flex 对齐。不能直接对整个按钮加 d-none d-sm-inline，那会把图标也干掉。
- 结构必须是：
<button class="btn"><i class="bi bi-plus"></i><span class="d-none d-sm-inline">新增</span></button> - 图标建议用 Bootstrap Icons（v1.11+）或 Font Awesome 的
fa-fw类，保证宽度一致，避免换行抖动 - 如果用了
btn-sm或btn-lg，记得同步调整图标font-size，否则小按钮里大图标会撑破边距 - 别给
<span></span>加ml-1这类 margin —— 响应式断点切换时，margin 可能还在，导致图标和文字之间多出空隙
为什么用 d-none d-sm-inline 而不是 d-sm-block
d-sm-block 是让元素在 ≥576px 时变成 display: block，但按钮默认是 inline-flex（含图标时），强行设 block 会破坏水平布局，文字可能换行、或垂直居中失效。
d-none d-sm-inline 才是正确组合：小屏完全不渲染文字节点，中屏及以上恢复为 inline（继承按钮的 display 上下文），保持内联流式排布。
- 验证方法：打开浏览器开发者工具，切到 iPhone SE 尺寸，检查文字
<span></span>是否真的从 DOM 中被移除（不是仅visibility: hidden） - 若用的是自定义 SVG 图标，确保它没有设置
width/height内联样式，否则响应式下尺寸不会随字体缩放 - 注意
d-sm-inline在 Bootstrap 5.3+ 中有效；若用的是 5.0–5.2，需降级为d-none d-sm-inline-block，否则 Safari 可能不识别
图标点击区域太小、hover 无反馈怎么办
纯图标按钮默认 padding 不足，尤其当只留 <i></i> 时，Bootstrap 的 .btn 基础 padding 会被图标内容压缩，实际可点击区域可能只有 16×16px。
- 必须显式加内边距：
class="btn px-3 py-2"（哪怕只是图标，也要保障最小 44×44px 触控区） - 悬停反馈不能只靠
:hover改背景色 —— 图标按钮常用于浅色背景，深色 hover 会突兀。推荐加box-shadow: 0 0 0 3px rgba(0,123,255,.25)模拟焦点环 - 键盘用户需要
tabindex="0"和role="button"（如果按钮没type属性或不在表单中） - 别用
line-height垂直居中图标 —— 它对 flex 容器无效，且在不同字号下行为不稳定；坚持用display: flex; align-items: center; justify-content: center
移动端双击放大、图标模糊的兼容问题
部分 Android WebView 和旧版 iOS Safari 会对纯图标按钮触发双击缩放（zoom），或因未声明 viewport 导致 SVG 渲染模糊。
- 必须在
中确认有：<meta name="viewport" content="width=device-width, initial-scale=1"> - SVG 图标请加
viewBox并移除width/height属性，让其随父容器 font-size 缩放 - 若用 PNG 图标，确保提供 2x 分辨率版本，并用
background-image: url(icon@2x.png); background-size: contain;替代<img>标签 - 禁用双击缩放（仅限按钮区域）：
style="-webkit-user-scalable=no; touch-action: manipulation;"，但慎用 —— 它会影响页面整体手势，优先考虑增大点击区域而非禁用缩放
:focus-visible）下的视觉反馈缺失。很多团队只测鼠标 hover，忘了键盘 Tab 切换时，用户根本看不到当前聚焦在哪 —— 这不是体验问题，是 WCAG 2.1 AA 级合规硬要求。
