Bootstrap 本身不提供 number 微调控件的独立组件，仅对原生 做基础样式重置，不添加箭头交互逻辑或键盘绑定，跨浏览器一致性及高级功能需自行通过 CSS 或 JS 补足。
Bootstrap 本身不提供 number 微调控件的独立组件
Bootstrap（包括 v5.x 和 v6 alpha）没有封装专门的“数字微调框”（即带上下箭头的 增强版）。它只对原生 做基础样式重置（比如去除默认边框、统一字体），并不添加箭头交互逻辑或键盘绑定。所以你看到的“微调效果”，其实是浏览器原生行为，不是 Bootstrap 实现的。
这意味着：
• 在 Chrome / Edge / Safari 中， 默认显示上下箭头；
• 在 Firefox 中默认不显示（需用 CSS 强制显示或依赖 JS 模拟）；
• 箭头点击增减、鼠标滚轮、方向键操作，均由浏览器控制，Bootstrap 不干预。
- 如果你只需要基础数字输入 + 原生微调，直接用
即可 - 如果需要跨浏览器一致的箭头 UI 或自定义步进逻辑（如支持小数、禁用滚轮、限制范围），必须自己加 CSS 或 JS
- Bootstrap 的
form-control类仅负责尺寸、圆角、阴影等外观，不影响功能
如何让 type="number 在 Firefox 中也显示箭头
Firefox 默认隐藏 type="number" 的 spinner，需用 CSS 显式启用。Bootstrap 不包含这段规则，必须手动补全：
:not(input[type="number"]::-webkit-inner-spin-button),
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
/* Firefox 下显示 spinner */
input[type="number"]::-moz-inner-spin-button {
opacity: 1;
display: block;
}
注意：-moz-appearance: textfield 是为了防止 Firefox 把输入框渲染成只读样式；::-moz-inner-spin-button 的 opacity: 1 和 display: block 才真正让它可见。漏掉任一都会导致 Firefox 无箭头。
- 不要只写
-moz-appearance: spinbuttons（已废弃且无效） - 避免在
form-control上叠加过多自定义padding，否则 spinner 可能被裁切 - 若使用 Bootstrap 5.3+ 的 CSS 变量主题，需确保
font-size和height与 spinner 高度匹配，否则箭头错位
用 JavaScript 补足原生 type="number" 的短板
原生控件不支持：按住箭头连续增减、滚轮禁用、小数步进（如 step="0.1" 在某些浏览器中失效）、空值时回退到默认值等。这时得靠 JS 控制：
<input type="number" class="form-control" id="price" step="0.01" min="0" max="9999">
对应 JS（轻量级，不依赖 jQuery）：
const input = document.getElementById('price');
input.addEventListener('wheel', e => e.target.blur()); // 禁用滚轮，防误触
input.addEventListener('keydown', e => {
if (e.key === 'ArrowUp') { e.preventDefault(); input.stepUp(); }
if (e.key === 'ArrowDown') { e.preventDefault(); input.stepDown(); }
});
-
stepUp()/stepDown()会尊重step、min、max属性，比手动value++安全 -
blur()禁滚轮是简单有效方案；若需保留滚轮，应e.preventDefault()并手动计算变化 - 别监听
input事件做校验后改value——这会导致光标跳到末尾，体验极差；改用change或blur
替代方案：用 Bootstrap 插件或第三方库？
Bootstrap 官方不维护数字微调插件。社区常见选择有：
-
bootstrap-input-spinner：轻量（~3KB），纯 CSS + JS，兼容 Bootstrap 5，支持按钮长按、自定义按钮图标、响应式适配 -
noUiSlider+input同步：适合需要滑块 + 输入双控的场景，但体积大、学习成本高 - 完全手写（含 SVG 箭头 +
pointerdown连续触发）：可控性最强，但开发和维护成本明显上升
如果项目已用 bootstrap-input-spinner，初始化只需：
$('input[type="number"]').inputSpinner();
但它会覆盖原生 type="number" 的验证逻辑（如 required、min），需额外用 JS 补校验。这点容易被忽略，上线后才发现表单提交时缺失前端约束。
