如何使 select2 下拉高度与内联按钮相同？

Question

我正在尝试调整下拉菜单的高度，使其与其旁边的按钮相同，但我不知道在哪里应用样式，或者即使它可能。

<div class="row m-3">
  <div class="col-12">
    <div class="form-inline">
      <div class="input-group">
        <select id="theSelect">
        <option value="1">Number One</a>
        <option value="2">Number Two</a>
        <option value="3">Number Three</a>
      </select>
    </div>
    <a href="#" class="btn btn-info" role="button">Add</a>
  </div>
</div>

这里 codepen 显示了这个问题。

Answer 1

您可以添加以下CSS来控制高度或宽度：


.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

类 .select2-container ,.select2-selection--single,.select2-selection__rendered,.select2-selection__arrow 在您通过 [=21 启动 select2 时被渲染=].

如何使 select2 下拉高度与内联按钮相同？

How to make select2 dropdown height the same as inline button?

jquery-select2

bootstrap-4