Multiline Bootstrap-Select with height：auto

Question

我使用Bootstrap-Select with Multiple select boxes和

white-space: normal;
height: auto

所以它变成了多线，但是height: auto在盒子上长大（我认为）底部有太多空间（用红线标记）

有没有机会将其删除？

段：

＆＃13;

＆＃13;

select[multiple],
select[size] {
  height: auto;
}
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
select {
  text-transform: none;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.input-group {
  border-collapse: separate;
}
.bootstrap-select .btn {
  /* enables multiline on selectpicker */
  white-space: normal !important;
  word-wrap: break-word;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">

<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>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需将white-space规则移至.filter-option类，因为这是插件更新所选值的位置。

如果您打开 DevTools 并观看<span class="filter-option pull-left">，您会看到它更新。

<强> CSS

.bootstrap-select .filter-option { white-space: normal; }

工作示例：

＆＃13;

＆＃13;

body {
  padding: 20px;
}
form {
  max-width: 250px;
  margin: auto;
}
/*USE THE BELOW RULE */

.bootstrap-select .filter-option {
  white-space: normal;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.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://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

我希望它有效

添加此款式

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    white-space: normal;
    width: 100%;
    word-wrap: break-word;
}

从CSS中删除以下样式

select[multiple], select[size] {
    height: auto;
}
.bootstrap-select .btn {
  /* enables multiline on selectpicker */
  white-space: normal !important;
  word-wrap: break-word;
} 

Answer 3

如果您想让一个人与另一个人在一起，请尝试此 css

.selectpicker .bootstrap-select .filter-option {
  white-space: pre-line !important;
}
.selectpicker rule_container .bootstrap-select {
  display: block !important;
}

js

$(".selectpicker").on("changed.bs.select", function (e, clickedIndex, newValue, oldValue) {
            $('.bootstrap-select .filter-option').text($.trim($('.bootstrap-select .filter-option').text()))
        });
    $(".selectpicker").on("loaded.bs.select", function (e, clickedIndex, newValue, oldValue) {
            $('.filter-option').text($.trim($('.rule_container .bootstrap-select .filter-option').text()))
        });