Bootstrap 5.3：带浮动标签的SELECT组件如何显示更多可见选项？

我在Bootstrap 5.3.x（最新版）中尝试让浮动标签（form-floating）与设置了size="5"的HTML select组件配合使用，但无法实现预期效果，不确定是否需要特殊处理或遗漏了文档内容。根据Bootstrap的Select组件文档说明，select元素应该可以调整尺寸，但尝试后没有成功。

我的测试代码如下：

<div class="form-floating">
  <select id="example" name="example" size="5" class="form-select form-select-sm">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <label for="example">Works with selects</label>
</div>

问题表现：浮动标签位置错乱，select的多行显示效果不符合预期。

解决方案 #

Bootstrap的form-floating组件默认是为单行输入控件设计的，当select设置size属性变为多行选择器时，默认CSS样式会导致标签定位和控件高度冲突，需通过自定义CSS调整：

自定义样式代码 #

/* 通用适配所有带size属性的多行select */
.form-floating .form-select[size] {
  height: auto;
  padding-top: 1.625rem; /* 为浮动标签预留顶部空间 */
}

/* 针对size="5"的小尺寸select精确调整高度 */
.form-floating .form-select[size="5"].form-select-sm {
  min-height: calc(38px * 5 + 2px); /* 38px为form-select-sm的选项行高，乘以数量加边框高度 */
}

/* 修正浮动标签的定位位置 */
.form-floating label {
  top: 0.5rem;
}

修改后的完整示例 #

<div class="form-floating">
  <select id="example" name="example" size="5" class="form-select form-select-sm">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <label for="example">Works with selects</label>
</div>

<style>
.form-floating .form-select[size] {
  height: auto;
  padding-top: 1.625rem;
}

.form-floating .form-select[size="5"].form-select-sm {
  min-height: calc(38px * 5 + 2px);
}

.form-floating label {
  top: 0.5rem;
}
</style>

说明 #

Bootstrap官方并未将form-floating与带size属性的多行select作为默认支持组合，因此需要自定义样式适配。如果使用其他尺寸的select（如form-select、form-select-lg），可根据对应选项行高调整CSS中的数值，核心是确保标签不被遮挡且select能显示指定数量的选项。

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