bootstrap 5 无 formstack 组件，堆叠表单应使用 form + mb-3 + form-label + form-control 类组合实现；form-floating 需嵌套在 row 的 col-* 内，避免 w-100 干扰宽度，移动端需 scrollintoview 补救聚焦遮挡；复选框/单选按钮须用 form-check 结构，禁用 form-floating。
Bootstrap 5 里没有 FormStack 这个组件
别在文档里搜 FormStack，它不是 Bootstrap 的原生类或 JS 插件。你看到的可能是别人封装的自定义组件名，或是把“堆叠表单（stacked form）”误写成了 FormStack。Bootstrap 官方只提供语义化类组合来实现堆叠效果：比如 form + mb-3 + form-label + form-control，靠垂直外边距和块级流自然堆叠。
常见错误是强行加 display: flex 或 d-flex 到表单容器上，结果 label 和 input 被拉成一行——堆叠失效的根源往往就在这里。
用 form-floating 做响应式堆叠表单要避开三个坑
form-floating 本质是视觉浮层效果（label 浮在 input 上），它本身不控制堆叠方向，但配合栅格能做出更紧凑的响应式结构。关键点：
- 必须把
form-floating放进col-*内，且该col-*必须是row的直接子元素；否则栅格断点（如col-md-6）不生效，小屏下依然并排 - 别给
form-floating外层加w-100或width: 100%——它会跟col-*的弹性宽度计算冲突，导致输入框莫名缩窄 - 移动端 focus 后键盘弹出，常把底部 input 盖住：
input触发focus事件时，手动调element.scrollIntoView({block: 'nearest'})补救，纯 CSS 无解
堆叠表单在小屏堆叠、中屏并排，靠的是 col-12 col-md-6 不是媒体查询
想让两个字段在手机竖屏时上下堆叠、平板横屏时左右并排？不用自己写 @media，直接用 Bootstrap 栅格：
<div class="row">
<div class="col-12 col-md-6">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name"><label for="name">姓名</label>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email"><label for="email">邮箱</label>
</div>
</div>
</div>
注意：col-12 在所有尺寸下都占满一行，col-md-6 在 ≥768px 时才生效 → 自动切为两栏。漏掉 row 父容器，或把 form 直接插在 row 和 col-* 中间，都会导致栅格失效、字段错位。
复选框/单选按钮堆叠容易被忽略的渲染细节
Bootstrap 对 checkbox 和 radio 用了专用结构：form-check 容器 + form-check-input + form-check-label。如果直接套 form-floating，label 会浮到 checkbox 上方遮挡图标，视觉错乱。
正确做法是放弃 form-floating，改用原生堆叠结构：
<div class="form-check mb-2"> <input class="form-check-input" type="checkbox" value="" id="agree"><label class="form-check-label" for="agree">我已阅读并同意用户协议</label> </div>
这里 mb-2 控制堆叠间距，比手写 margin-bottom 更可靠；若需响应式（比如小屏文字换行挤压），把整个 form-check 包进 col-12 即可，无需额外处理。
最易被忽略的是：多个 form-check 连续排列时，最后一个没设 mb-*，会导致和下方按钮之间没空隙——Bootstrap 不自动给末尾留白，得自己补。
