Bootstrap模态框内textarea设置rows属性高度不生效问题

这个高度异常是Bootstrap 5浮动表单标签组件的默认样式覆盖导致的。你使用了form-floating类实现浮动标签效果，Bootstrap为了保证浮动标签的定位逻辑正常，会给该容器下的textarea.form-control设置固定的默认高度（约3行文本高度），这个硬编码样式的优先级高于原生rows属性的高度计算规则，所以你设置的rows="10"没有生效。

你可以根据自己的需求选下面任意一种方案解决：

• 方案1：添加自定义CSS覆盖默认样式，保留rows属性能力
  在你项目的全局自定义样式文件中加入下面的规则，让浮动标签容器内的文本域高度回归原生计算逻辑：

  /* 让form-floating下的textarea正常响应rows属性 */
  .form-floating > textarea.form-control {
      height: auto;
      /* 可选：设置最小高度，避免文本域初始高度过矮 */
      min-height: 8rem;
  }
  

  加完这段样式后，你代码里写的rows="10"就会正常渲染为10行高度，浮动标签的效果也不会受影响。如果不想全局生效，你可以给当前笔记文本域单独加一个自定义类，把样式规则限定在这个文本域上即可。
• 方案2：直接通过内联样式指定文本域高度
  如果不想新增全局CSS规则，可以直接在textarea标签上通过style属性写死需要的高度，比如：

  <textarea class="form-control" rows="10" id="NoteBody" name="NoteBody" style="height: 240px"></textarea>
  

  你可以根据自己项目的字号、行高调整这个高度值，直到满足10行文本的展示需求即可。
• 方案3：移除form-floating类改用常规表单布局
  如果你不需要标签浮动的交互效果，直接删除包裹textarea和label的div上的form-floating类，把label调整到textarea上方做常规表单项布局，rows属性会立刻按照原生规则生效，不需要额外修改任何样式。

注意：不要直接修改Bootstrap源文件里的form-floating相关样式，否则会导致站点内其他用到浮动标签的表单项出现标签错位、内容重叠的问题。

内容的提问来源于stack exchange，提问作者FrontRangeGuy