Bootstrap不提供房屋租赁专用组件，需用.form-control、.form-label、.btn及.row/.col布局语义化HTML；按“房源信息”“租客信息”“租期与费用”分组，用包裹；地址拆为四字段，租金用type="number"加min="0"和step="0.01"，证件照用，手机号校验用pattern但需后端配合，日期加min="{{ today }}"，多选用.form-check，下拉需确保.form-select直连select且无布局破坏，逻辑交互如整租隐藏床位数须JS实现。
Bootstrap 本身不提供“房屋租赁表单”这种业务组件，它只提供表单控件的样式和栅格系统；你需要自己组织语义化 HTML 结构，并用 Bootstrap 的类控制布局与交互样式。
怎么用 form + Bootstrap 类快速搭出可用表单
别从零写 CSS，直接用 Bootstrap 的 .form-control、.form-label、.btn 和 .row/.col 布局。重点是把字段分组合理，比如“房源信息”“租客信息”“租期与费用”三块，每块用 包裹并加 legend。
- 地址字段建议拆成
province、city、district、detail四个，方便后端校验和地图服务对接 - 租金输入用
type="number"并加min="0"，避免用户输负数或字母 - 上传证件照用
，再加.form-control-file（Bootstrap 4）或.form-control（Bootstrap 5+）
required 和 pattern 在租赁表单里的实际效果
浏览器原生校验能拦截明显错误，但别全依赖它——比如 pattern 写成 ^[1-9]\d{6,12}$ 可以限制手机号长度和开头，但无法判断是否真为有效手机号；required 对 要配合空选项：。
- 租金字段设
step="0.01"支持小数，否则默认只接受整数 - 入住日期用
type="date"，加min属性限制不能早于今天：min="{{ today }}"（服务端渲染时注入）或用 JS 动态设置 - 对多选标签如“配套设施”，用 包裹多个
，别用name相同的radio移动端下拉选择（如城市、户型）为什么点不动
常见原因是父容器用了
.col-*但没配.form-select（Bootstrap 5）或.form-control（Bootstrap 4），导致 iOS Safari 忽略点击区域。更隐蔽的问题是：在.row内嵌套了未闭合的，破坏了 flex 布局流，使下拉箭头不可点击。- 确保
直接有.form-select类（Bootstrap 5），且不在position: absolute的父元素里 - 如果用第三方插件（如 Choices.js），必须等 DOM 渲染完再初始化，否则
document.querySelector('.js-choice')找不到节点 - 安卓微信 WebView 对
select支持不稳定，关键字段（如租期）建议改用input type="number"或日期选择器
真正难的不是加 Bootstrap 类，而是字段逻辑耦合——比如选了“整租”就隐藏“床位数”，选了“押一付三”就自动算出首期金额。这些得靠 JS 控制显隐和计算，Bootstrap 只负责让按钮看起来像按钮、输入框看起来像输入框。
- 确保
