直接设 height 不行，因为 textarea 忽略 height、select 在 safari 不响应、input-group 按钮高度不匹配，且缩放时错位；根本原因是浏览器渲染逻辑不同，应改用 min-height + padding + box-sizing:border-box 组合约束。
为什么直接设 height 不行
给 .form-control 写 height: 36px 看似简单，但会出一堆问题：textarea 忽略 height、select 在 Safari 里不响应、input-group 里的按钮高度对不上，而且缩放字体或切换设备时容易错位。根本原因是浏览器对表单控件的渲染逻辑不同，硬塞像素值等于在和 UA stylesheet 对着干。
用 min-height + padding + box-sizing 才可靠
Bootstrap 5 默认已设 box-sizing: border-box，但如果你用的是自定义构建或旧版，必须确认这点。真正起作用的是组合约束：
-
min-height: calc(1.5em + 0.75rem + 2px)—— 1.5em 是行高基准，0.75rem 是上下 padding（Bootstrap 默认），2px 是上下 border 宽度 - 保持
padding: 0.375rem 0.75rem不变，避免内边距浮动导致高度波动 - 所有尺寸单位统一用
rem或em，别用px
这样既适配字体缩放，又让 Chrome/Firefox/Edge 渲染出几乎一致的视觉高度。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
input-group 里怎么同步高度
当 .input-group 包含 .btn 或 .input-group-text 时，它们默认高度常比 .form-control 高。不要单独调 .btn 的 height，而是让整个组成为弹性容器：
- 给
.input-group加display: flex和align-items: stretch - 让子元素（
.form-control、.input-group-text、.btn）都设min-height: calc(1.5em + 0.75rem + 2px) - 去掉
.btn的line-height覆盖，让它继承父级行高
不同尺寸类怎么保持比例一致
.form-control-lg 和 .form-control-sm 内部改的是 font-size 和 padding，不是 height。如果你手动覆盖了基础 min-height，就得同步调整对应尺寸类里的计算值：
-
.form-control-lg→min-height: calc(1.5em + 1rem + 2px)（padding 上下是 1rem） -
.form-control-sm→min-height: calc(1.5em + 0.5rem + 2px)（padding 上下是 0.5rem） - 千万别只改基础类，漏掉尺寸变体，否则小号输入框会“塌”进去
实际高度差异最终取决于 font-size 变化是否被 min-height 中的 em 值准确捕获——这点最容易被忽略，一不留神就出现 lg/sm 高度错层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
