bootstrap 5 官方不提供 btn-fab 类，因 fab 属 material design 规范，需开发者用 position: fixed、rounded-circle、box-shadow 等自定义样式实现。
为什么 btn-fab 类名在 bootstrap 5 中根本不存在
bootstrap 官方 css 里没有 btn-fab 这个类——这是很多刚上手的人踩的第一个坑。fab（floating action button）是 material design 的概念，bootstrap 默认不提供，强行写 class="btn btn-fab" 不会生效，按钮也不会悬浮或带阴影。
真正能用的路径只有一条：自己定义样式，复用 Bootstrap 的基础按钮语义和部分工具类（比如 btn、btn-primary），再叠加定位、阴影、圆角等自定义规则。
- 不要试图从网上找“Bootstrap FAB 插件”，多数已过时或与 Bootstrap 5+ 冲突
- 避免直接复制 Material UI 的 CSS，它依赖大量 JS 和特定 DOM 结构，和 Bootstrap 混用容易错位
-
position: fixed是实现“悬浮”的关键，但必须配合bottom和right值，且注意移动端安全区域（尤其是 iOS）
如何用纯 CSS 实现可复用的 FAB 样式
核心是三件事：圆形、阴影、固定定位。Bootstrap 提供了 rounded-circle 和部分阴影工具类（如 shadow-sm、shadow），但默认阴影太浅，rounded-circle 对尺寸敏感，需配合 width/height 才能稳定成圆。
推荐这样写一个最小可用 FAB：
<button type="button" class="btn btn-primary btn-fab"> <i class="bi bi-plus"></i> </button>
对应 CSS（建议放在自定义样式表末尾，避免被 Bootstrap 覆盖）：
.btn-fab {
width: 56px;
height: 56px;
padding: 0;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,.24);
position: fixed;
bottom: 24px;
right: 24px;
display: flex;
align-items: center;
justify-content: center;
}
/* 防止小屏重叠底部导航栏 */
@media (max-width: 576px) {
.btn-fab {
bottom: 80px;
right: 16px;
}
}
-
padding: 0必须加，否则btn自带的 padding 会让图标偏心 -
display: flex+align-items/justify-content是居中图标的最稳方案，比line-height可靠 - 阴影用
box-shadow手写，别依赖shadow工具类——它的z-index太低，且扩散值不够
FAB 点击后遮挡内容怎么办
常见现象：点击 FAB 后弹出菜单或模态框，结果被 Bootstrap 的 .modal-backdrop 或其他组件遮住。本质是 z-index 层级没对齐。
Bootstrap 5 的 z-index 基线是：dropdown（1000）、sticky（1020）、fixed（1030）、modal-backdrop（1040）、modal（1050）。FAB 属于固定元素，应至少高于 modal-backdrop。
- 给
.btn-fab加z-index: 1060（比modal高一层） - 如果 FAB 上要叠加下拉菜单（比如点击展开操作项），菜单容器需额外设
z-index: 1070 - 不要全局改
$zindex-modal-backdrop变量——会影响所有模态框，得不偿失
图标对齐和响应式缩放怎么处理
FAB 尺寸固定为 56px 时，Bootstrap Icons 默认大小（1rem）在高 DPI 屏幕上会显得小，且图标上下左右可能有微小偏移。
解决方案很简单：
- 图标用
<i class="bi bi-plus fs-4"></i>——fs-4是 Bootstrap 5 的字体大小工具类，对应1.5rem，比默认更饱满 - 如果用 SVG 替代图标，务必加
width="24" height="24"，并设vertical-align: -0.125em微调基线 - 小屏（
xs）下可降为48px，但别低于40px——否则拇指难点，违反移动端触控规范
真正麻烦的是暗色模式适配：FAB 的阴影在深色背景上对比度不足。这时候不能只改 box-shadow，得监听 prefers-color-scheme 并动态调整 rgba() 的 alpha 值，或者干脆换一套浅色阴影变量。
