Bootstrap 4.5中input-group-sm下自定义选择框标签尺寸异常问题

我来帮你搞定这个小问题！你遇到的情况是因为在Bootstrap 4里，虽然input-group-sm会自动缩小custom-select这类表单控件，但用<label>作为input-group-text时，可能会因为标签的默认样式（比如margin、line-height）干扰，导致尺寸没有正确继承。加上你的按钮也没匹配小尺寸，视觉上就更不协调了。

修正方案： #

• 把<label>换成<span>：input-group-text的设计初衷是配合<span>使用，标签的默认样式会影响尺寸收缩，换成span能确保Bootstrap的小尺寸样式正确生效。
• 给按钮添加btn-sm类：让按钮尺寸和整个input-group的小尺寸保持统一，视觉更和谐。
• 补充可访问性属性：用aria-labelledby关联select和对应的文本标签，提升页面的可访问性。

修正后的完整代码： #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="input-group input-group-sm mb-2">
    <div class="input-group-prepend">
      <span class="input-group-text" id="newsAnzahlLabel">Anzahl</span>
    </div>
    <select class="custom-select" id="newsAnzahl" name="newsAnzahl" aria-labelledby="newsAnzahlLabel">
      <option value="3" selected>3</option>
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
      <option value="200">200</option>
    </select>
    <div class="input-group-prepend">
      <span class="input-group-text" id="newsSortierungLabel">Sortierung</span>
    </div>
    <select class="custom-select" id="newsSortierung" name="newsSortierung" aria-labelledby="newsSortierungLabel">
      <option value="ASC">Aufsteigend</option>
      <option value="DESC" selected>Absteigend</option>
    </select>
    <button id="button_getnewslist" type="button" class="btn btn-primary btn-sm">Liste aktualisieren</button>
  </div>
</form>

额外排查点： #

如果换成span后还是有尺寸问题，检查一下是否有自定义CSS覆盖了Bootstrap的默认样式，比如给input-group-text设置了固定的padding或font-size，这会干扰input-group-sm的样式生效。

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