fixed-bottom光晕不生效，主因是父容器设置position:relative、overflow:hidden或transform干扰定位与焦点捕获；应将底部栏直挂body下，或覆盖.form-control:focus/.btn:focus的box-shadow并保留rgba透明度适配暗色模式。
fixed-bottom + focus-visible 光晕不生效？先确认定位上下文
直接加 fixed-bottom 后 input 或 button 点击没光晕，大概率是父容器干扰了定位或焦点捕获。Bootstrap 的 fixed-bottom 本质是 position: fixed; bottom: 0;，但若它被包裹在 position: relative 或 overflow: hidden 的容器里，不仅光晕可能被裁掉，连 :focus-visible 伪类都可能无法触发。
实操建议：
- 把底部栏直接放在
<body>下，避开所有布局容器干扰 - 如果必须嵌套，检查其最近的定位祖先（比如
<main>或外层<div>）是否设置了position: relative、transform、filter或overflow: hidden—— Safari 和部分 Android 浏览器下这些会直接禁用focus-visible - 移动端真机测试时，确保不是靠鼠标 hover 触发的伪类（
:focus才是点击/Tab 焦点的真实状态）
光晕粗细和颜色怎么调才不破坏暗色模式
底部栏里的 <input> 或 <button> 获取焦点后，默认光晕来自 box-shadow，不是 outline。硬改 outline-width 没用，且会丢失暗色适配。
正确做法是覆盖 .form-control:focus 或 .btn:focus 的 box-shadow 第三个值（扩散半径），同时保留原 rgba 结构：
.fixed-bottom .form-control:focus {
box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25) !important;
}
.fixed-bottom .btn:focus {
box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25) !important;
}关键点：
- 只动第三个参数（如
0.15rem），别碰前两个0 0，否则光晕偏移 - rgba 中的 alpha 值（
0.25）必须保留，否则暗色模式下data-bs-theme="dark"切换时颜色会错乱 - 如果用了
form-control-lg，光晕粗细不会自动放大，需配合媒体查询微调：@media (max-width: 576px) { ... box-shadow: 0 0 0 0.1rem ... }
点击区域太小？别只加 btn-lg
底部固定栏空间有限，btn-lg 在手机上依然容易点歪。光增大字体没用，热区尺寸才是核心。
推荐组合：
-
py-4 px-5：上下 1.5rem（24px）、左右 1.25rem（20px） -
min-height: 56px：满足 Material Design 推荐最小触控高度 - 若用
btn-group，整个组加gap: 0.5rem，避免按钮间空隙不均 - 禁用
user-select: none—— 某些自定义样式会误加这个，导致 iOS 上长按触发复制而非点击
内容被遮挡？用 pb-* 而不是 margin-bottom
很多人给 <main> 加 margin-bottom: 60px 来腾出底部空间，结果在小屏或动态内容加载后留白错位。这是布局流污染，响应式下极不稳定。
正确解法是让内容自己“撑开”空间：
- 优先用
pb-5（padding-bottom: 3rem）—— 它属于内容自身内边距，不影响 flex 或 grid 的计算逻辑 - 如果
<main>是flex-grow-1，再加mb-5可能导致底部空白过大；此时pb-5更可靠 - 固定栏高度不确定时（比如含多行文字或图标），用
pb-xxl或自定义 CSS 变量更稳妥，别死记数值
最易被忽略的是：fixed-bottom 容器内部若含表单元素，它们的 :focus 光晕默认会被父级 overflow: hidden 截断——哪怕你没显式设置，某些 flex 容器或 Bootstrap 的 d-flex h-100 组合也会隐式触发。动手前先检查 computed styles 里的 overflow 值。
