Question

我正在使用Bootstrap 4和Bootstrap Select版本1.13.2（最新版本），该版本应支持Bootstrap4。如文档中所述，我什至通过

手动指定了BS版本。

$.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/

Answer 2

使用最新版本（1.13.9）时，该图标非常合适。 Bootstrap-Select已删除<select>的边框，因此它看起来与您的示例不完全相同。您可以使用以下方法调整边框：.btn-light{ border: solid 1px #dde1e6; }

#border .btn-light{ border: solid 1px #dde1e6; }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/i18n/defaults-*.min.js"></script>

<div class="row">
  <div class="col-6">
    <div class="form-Group">
      <div class="input-group mb-3">
        <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 id="border" class="input-group mb-3">
        <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>
  </div>
</div>

具有BS4输入组前缀的Bootstrap选择

2 个答案: