Question

我正在尝试将bootstrap-select与多选选项一起使用。我的问题是关闭选择后如何使所有选择的选项在按钮中可见。

我遵循this discussion，但是该解决方案不适用于Bootstrap 4：文本自动换行，但按钮高度未调整，文本溢出了输入

这是代码：

body {
  padding: 20px;
}
form {
  max-width: 250px;
  margin: auto;
}
/*USE THE BELOW RULE */

.bootstrap-select .filter-option {
  white-space: normal;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<form>
  <div class="form-group">
    <div class="input-group">
      <select multiple="multiple" title="colors" class="selectpicker" name="article[color][]" id="article_color" style="display: none;">
        <option data-value="green" data-content="<i class='fa fa-question-circle-o'></i> Green" value="green">green</option>
        <option data-value="dark green blue yellow" data-content="<i class='fa fa-question-circle-o'></i> Dark Green Blue Yellow" value="dark green blue yellow">dark green blue yellow</option>
        <option data-value="stripes red orange" data-content="<i class='fa fa-question-circle-o'></i> Stripes Red Orange" value="stripes red orange">stripes red orange</option>
      </select>
    </div>
  </div>
</form>

<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/i18n/defaults-*.min.js"></script>

检查代码，我发现 .filter-option-inner div修正了高度，而问题始于.filter-option div未被扩展的

关于如何使高度动态化的任何想法？

谢谢

Bootstrap-Select不会使用Bootstrap 4换行

0 个答案: