如何让Bootstrap 5网格行垂直自适应内容高度避免内容溢出

出现该问题的核心原因是网格行的高度计算逻辑被自定义样式干扰，导致内部内容无法正确撑开行高，进而溢出覆盖下方行内容，按照以下步骤修改即可：

• 移除所有给.row、.col元素设置的固定高度属性（如height: 30px、max-height限制），让容器高度默认由内部内容自动计算
• 如果内部的label、输入框等元素设置了float浮动属性，给父级.row添加Bootstrap自带的clearfix类，清除浮动避免父容器高度塌陷
• 表单场景下建议给所有label元素添加Bootstrap原生的form-label类，该类自带适配网格布局的边距、行高样式，不会出现异常高度溢出
• 不要给.row设置overflow: hidden、overflow: auto等非默认的overflow属性，这类属性会干扰正常的高度计算逻辑
• 如果自定义了行对齐规则，可给.row添加align-items-stretch类，让所有列高度自动适配行内最高内容的高度，行高也会同步自适应

正确布局代码示例：

<div class="container">
  <!-- 第一行 无固定高度，自动适配内容 -->
  <div class="row">
    <div class="col-md-6">
      <label for="input1" class="form-label">测试输入项1</label>
      <input type="text" class="form-control" id="input1">
    </div>
    <div class="col-md-6">
      <label for="input2" class="form-label">测试输入项2</label>
      <input type="text" class="form-control" id="input2">
    </div>
  </div>
  <!-- 第二行 不会被上一行覆盖 -->
  <div class="row mt-4">
    <div class="col-12">
      第二行正常显示内容
    </div>
  </div>
</div>

如果你的label设置了position: absolute之类的脱离文档流属性，要么改为默认的静态定位，要么给label所在的父级.col添加对应数值的上下内边距，提前预留label的高度空间即可。

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