bootstrap-4 - 使用 BS4 input-group-prepend 进行引导选择

Question

我正在使用 bootstrap 4 和 bootstrap 选择版本 1.13.2(最新)，它应该支持 bootstrap 4。如文档中所述，我什至通过手动指定 BS verison

$.fn.selectpicker.Constructor.BootstrapVersion = '4';

我想在选择器旁边有一个图标，我使用了以下标记

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-user"></i>
      </div>
    </div>
    <select id="internal-select-picker" class="form-control selectpicker" data-live-search="true" data-size="10" multiple>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>                        
</div>

结果是这样的，正如您所看到的图标比选择稍大，我尝试将不同的 bs 样式应用于选择器和图标组，但没有任何效果



任何解决此问题的建议将不胜感激

Answer 1

通过查看 Bootstrap CSS 对下拉框所做的操作并创建自己的类来添加修复，我最终提出了自己的修复方法。

我添加了自己的类，名为 fix-label-group和 fix-label-item .请参阅下面的我的 jsfiddle:

https://jsfiddle.net/ddschmitz/nkywb1xg/2/