本文介绍使用 bootstrap 的 `input-group` 组件实现 select 元素与按钮（如提交按钮）的水平对齐，解决常见布局错位问题，并提供可直接复用的 html 结构与注意事项。
在 Bootstrap 项目中，
以下为推荐写法（兼容 Bootstrap 5+）：
<div class="input-group input-group-sm">
<select class="form-select" id="tstatus" name="tstatus">
<option selected value="<?php echo htmlspecialchars($status); ?>">Status</option>
<option value="Booked">Booked</option>
<option value="Ontrip">On Trip</option>
<option value="Cancelled">Cancelled</option>
</select>
<input type="hidden" id="tid" name="tid" value="<?php echo htmlspecialchars($id); ?>">
<button class="btn btn-primary" type="submit" name="thestatus" id="thestatus">Go</button>
</div>✅ 关键要点说明：
- 使用 作为外层容器，确保内部子元素按行内方式排列并对齐基线；
- 添加 .input-group-sm 可统一缩小整体尺寸（需配合 form-select 和 btn 的尺寸类）；
- 推荐将 替换为
- 隐藏域 可保留在 .input-group 内（Bootstrap 允许），但不参与视觉渲染，不影响对齐；
- 务必对 PHP 输出变量（如 $status、$id）执行 htmlspecialchars() 转义，防止 XSS 漏洞。
⚠️ 注意事项：
- 不要将
- 若使用 Bootstrap 4，请确认已引入 bootstrap.min.css 且版本 ≥ 4.3（input-group 对 form-select 的支持自此完善）；
- 避免为 select 或 button 单独设置 margin/vertical-align 等 CSS，这会破坏 input-group 的内置对齐逻辑；
- 如需右侧按钮（如本例），无需额外样式；若需左侧按钮，可添加 .input-group-text 或调整 DOM 顺序。
通过该方案，select 与按钮将在所有屏幕尺寸下保持高度一致、边框连贯、点击区域清晰，符合现代 Web 表单的最佳实践。
