Multiline Bootstrap-Select with height: auto

Question

我正在使用带有多个选择框的 Bootstrap-Select 和

white-space: normal;
height: auto

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

有机会去掉吗？

片段：

white-space: normal;
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;
}

Answer 1

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

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

CSS

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

工作示例：

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