css - 高度为 : auto 的多行 Bootstrap-Select

Question

我正在使用 Bootstrap-Select with Multiple select boxes和

white-space: normal;
height: auto

所以它变成了多行，但是 height: auto 长大了(在我看来)底部空间太多的盒子(用红线标记)

有机会去除吗？

片段:

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

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

Answer 1

您只需移动您的 white-space规则.filter-option类，因为这是插件更新所选值的地方。

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

CSS

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

工作示例:

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

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

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