Bootstrap不提供大屏显图标小屏仅显文字的内置类，需用d-none d-md-inline等响应式工具类手动控制图标与文字的显隐，并配合me-1确保对齐稳定、避免抖动。
按钮图标在不同屏幕尺寸下切换显示
Bootstrap 本身不提供“大屏显示图标 + 小屏只显示文字”的内置类组合，必须手动控制图标元素的显隐。核心思路是：把图标和文字都写进按钮里，再用响应式工具类（如 .d-none、.d-md-inline）控制各自在不同断点下的可见性。
用 d-{breakpoint}-* 控制图标和文字的显示逻辑
关键在于理解 Bootstrap 的 display 工具类行为：默认图标和文字都存在，但通过断点类让它们在不同宽度下“交替出现”。常见错误是只给图标加隐藏类，却忘了文字也需要对应控制——否则小屏下图标消失，文字仍被图标挤偏或换行。
-
<button class="btn btn-primary"><i class="bi bi-download d-none d-md-inline"></i> 下载</button>—— 这样小屏时图标隐藏，但“下载”文字正常显示，无额外空格 - 如果图标用
<span>或<svg>，同样适用d-none d-md-inline；注意不要用d-md-none，它会让图标在中屏及以上都消失 - 避免对整个按钮加
d-lg-none类来“切换”，这会导致按钮整体消失，不是内容切换
确保图标和文字视觉对齐不跳动
图标隐藏/显示会改变按钮内联内容宽度，容易造成按钮宽度抖动或文字位置偏移。尤其在按钮内同时有图标和文字时，小屏下图标突然消失，文字可能左移一像素，影响体验。
- 给图标加
me-1（margin-right）比用空格更可控，且该 margin 在图标隐藏时自动失效 - 如果使用 Bootstrap Icons，推荐用
<i class="bi bi-xxx"></i>而非自定义 SVG，因其自带垂直对齐和尺寸一致性 - 测试时务必在真实设备或 Chrome DevTools 的 device toolbar 中切换
xs/sm/md断点，不要只靠缩放浏览器窗口
移动端点击区域不能因隐藏图标缩水
图标本身有宽高，隐藏后按钮的可点击区域理论上不变——但若图标外层套了额外 <span> 且没设 display: inline，可能意外破坏行内流布局，导致点击热区变窄。
- 检查最终渲染的按钮 HTML 是否有多余包裹标签，例如：
<span class="d-none d-md-inline"><i class="bi bi-save"></i></span>是安全的；但<div class="d-none d-md-inline">...</div>会换行，破坏按钮内联结构 - 用 DevTools 的 “Elements > Computed” 面板确认按钮的
line-height和padding在各断点下是否一致 - 真机测试时重点验证手指点击是否总能触发，特别是边缘区域
<button class="btn btn-outline-secondary"><i class="bi bi-gear d-none d-md-inline me-1"></i>设置</button>。别试图用 JS 动态增删图标——既增加复杂度，又可能在 SSR 或首次渲染时闪动。断点类的切换由 CSS 媒体查询驱动，零延迟、零 JS 依赖。 
