bootstrap 5 中实现一行三列表单需用 row 包裹三个 col-4（或响应式变体），每个 col 内嵌 mb-3 包含 label 和 input；不可直接给 input 加 col 类，否则破坏布局与样式。
Bootstrap 5 中用 row 和 col 控制一行三列表单
直接结论：Bootstrap 5 默认不自动把 <input> 横向排成三列，必须手动用栅格系统包裹。核心是给每个输入框套一层 <div class="col-4">（或响应式变体），再包在 <code><div class="row"> 里。
<p>常见错误是只写 <code><input class="form-control"> 然后加 float: left 或 display: inline-block —— 这会破坏 Bootstrap 的间距、响应行为和校验样式。
-
col-4是最简方案：3 × 4 = 12，刚好占满一行；小屏下会自动堆叠成一列（符合移动优先） - 需要适配中屏以上才三列？用
col-md-4，这样xs下仍垂直排列 - 每个
col内必须包含完整的表单控件结构：建议用<div class="mb-3"> 包住 <code><label></label>+<input>，否则上下间距不一致为什么不能直接对
input加col-*类？因为 Bootstrap 的
col-*类依赖 flex 布局，且要求父容器有display: flex（由row提供）。如果直接给<input>加col-4，它会脱离文档流、宽度计算异常，且失去form-control的默认块级表现。正确结构必须是：
<div class="row"> <div class="col-4"><div class="mb-3"> <label>...</label><input class="form-control"> </div></div>...</div>- 漏掉
row：列宽失效，变成普通块元素堆叠 - 漏掉
mb-3或类似间距类：label 和 input 之间没空隙，视觉拥挤 - 用
col-3试过？3 × 3 = 9，剩下 3 列空白，右侧留白难看
遇到
form-floating怎么办？form-floating要求<input>和<label></label>同级且包裹在同一容器内，此时不能把col加在input上，而要加在外层容器上。<div class="row"> <div class="col-4"> <div class="form-floating mb-3"> <input type="text" class="form-control" id="name"><label for="name">姓名</label> </div> </div> <div class="col-4"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="email"><label for="email">邮箱</label> </div> </div> <div class="col-4"> <div class="form-floating mb-3"> <input type="tel" class="form-control" id="phone"><label for="phone">电话</label> </div> </div> </div>- 注意：
form-floating容器本身不能设width，否则 label 浮动错位；靠col控制宽度即可 - 如果三个输入框内容长度差异大（比如一个短名、一个长邮箱、一个手机号），
col-4保证等宽，比用col-auto更整齐
自定义宽度或响应式断点要注意什么？
想让三列在桌面端等宽、平板横屏时两列、竖屏时一列？别硬写多个
col类叠加，用官方断点组合更稳：- 桌面端三列 + 平板横屏两列 + 其他情况一列：
col-12 col-sm-6 col-lg-4 - 避免用
col-xl-3：3 × 3 = 9，右侧留白，除非你额外加col-xl-3 ms-auto对齐，但复杂度上升 - 如果用了
form-control-lg，无需额外调高度 ——col类只管宽度，高度由表单类控制 - 验证状态（如
is-invalid）会正常撑开col内容，不用额外处理
真正容易被忽略的是：当三个输入框绑定了不同校验规则（比如必填、邮箱格式、手机号正则），它们的错误提示
<div class="invalid-feedback"> 会挤在各自 <code>col内部底部 —— 这没问题，但如果你把提示统一抽到行外，反而破坏语义和可访问性。 - 漏掉
