Bootstrap不提供火车票表单业务组件，需用form-control搭建基础结构，但出发地/目的地要用带搜索下拉，出发日期需兼容iOS并fallback，乘车人需动态增删，日期范围校验须手写JS，响应式断点应调整为col-12 col-sm-6 col-lg-4。
Bootstrap 本身不提供“火车票表单”这种业务组件，它只提供可组合的表单控件和布局工具；直接套用官方示例会漏掉关键交互逻辑（比如日期范围校验、车次动态筛选），也容易忽略移动端日期选择器兼容性问题。
用 form-control 搭建基础结构，但别依赖默认样式做业务逻辑
Bootstrap 的 form-control 能快速对齐输入框、下拉框和按钮，但火车票场景中几个字段有强约束：
-
出发地和目的地应使用带搜索的下拉（typeahead或select2），原生select不支持关键词过滤 -
出发日期推荐用input type="date"，但 iOS Safari 旧版本不触发原生日期控件，需 fallback 到flatpickr或air-datepicker -
乘车人是动态增删列表，不能只靠form-group堆砌，得配合 JS 控制 DOM 节点和name属性索引（如passengers[0][name]）
日期范围校验必须手写 JS，min 和 max 属性不够用
HTML5 的 min 只能限制单个日期，而火车票要求“出发日 ≤ 返程日”，且返程日通常需 ≥ 出发日 + 1 天。Bootstrap 不介入这个逻辑。
实操建议：
- 监听
departureDate的change事件，动态设置returnDate的min属性 - 提交前用
new Date()对比两个值，避免用户绕过前端限制（例如修改 DOM 属性） - 注意时区：用户本地时间 vs 12306 后端统一用北京时间，建议所有日期输入统一转为 YYYY-MM-DD 格式字符串再提交
响应式断点要重设，col-md-* 在手机上会挤成一列但失去操作空间
Bootstrap 默认的 col-md-6 在小屏下退化为 full-width，导致两个并排的日期选择器在手机上垂直堆叠，用户滚动成本高。
更合理的做法：
- 改用
col-12 col-sm-6 col-lg-4，让单行最多显示 2–3 个字段（出发地、目的地、日期） - 把“查询”按钮提至顶部固定位置，避免用户滑到底部才能点击（尤其在长表单+软键盘弹出时）
- 隐藏非必要字段（如“学生票”复选框）默认折叠，用
accordion或手写 toggle 控制显隐
真正卡住开发进度的，往往不是怎么画出表单，而是出发地/目的地数据源没对接好、日期控件在微信内置浏览器失效、或者表单提交后后端返回的错误码没映射到对应字段——这些 Bootstrap 帮不上忙，得盯住接口文档和真机测试。
