Bootstrap 4: selectpicker 1.13 不能正确匹配所选选项的内容

Question

到目前为止，问题只是文体问题：select 本身不适合 selected 选项的大小。它看起来太低了，溢出了容器。加上插入符号显示在右上角，而不是它应该在的位置（在右中）。看起来像这样：

使用以下代码：

<select class="selectpicker" data-style='btn-primary'>
    <option value="value">I'm a sad and a little bit too long option</option>
</select>

如您所见，显示 select 下拉菜单本身没有任何问题，只是按钮（具有当前 selected 值的初始字段）看起来一团糟一些理由。我怀疑这可能是插件本身的问题，因为我几乎没有应用任何可能会干扰的相关样式。我想收到如何让它正常工作的建议，因为我真的很喜欢这个插件并且不想自己编写所有功能。我只是不太擅长 css 并理解它的结构。我查看了插件正在生成的源 html，它只是看起来父容器 (div.filter-option) 缺少一些需要的属性来告诉它在哪里放置内容 (the包含文本的元素 div.filter-option-inner) 以及如何处理它。

插件来源（意味着与 Bootstrap 4 版本的 Bootstrap Select 插件正式兼容）：https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0 我的 Bootstrap 版本是 Laravel 5.6 Bootstrap 4.0 内置的默认版本。任何 help/advise/analysis 的问题都非常感谢！提前致谢！

更新 1： 很奇怪。。。代码如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

在全新的纯 jsfiddle 中显示时效果很好，但粘贴在自定义本地（和在线）.html 文件中时，它仍然显示混乱。我真的不知道为什么会这样！

Answer 1

如果你想缩小尺寸等于 select 那么你可以使用这个 CSS.

.bootstrap-select {
  position: relative !important;
}

.bootstrap-select .dropdown-menu {
  right: 0 !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  white-space: initial !important; 
}

$('.selectpicker').selectpicker();

.bootstrap-select {
  position: relative !important;
}

.bootstrap-select .dropdown-menu {
  right: 0 !important;
  transform: translate3d(0, 37px, 0px) !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  white-space: initial !important; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Answer 2

好吧，经过一段非常艰难的时间来解决这个问题，我想出了这个行为的真正原因，它隐藏在看似有问题的深处。 *鼓* 问题是 <!DOCTYPE html> 没有作为我的 html 页面响应中的第一件事被发送到浏览器。所以实际上这导致了插件的异常行为（显然，直到那时，这件事才影响我整个页面上的任何其他内容）。导致那个错误的是这一切真正有趣的部分。我正在使用 laravel 来管理我的视图，并使用一组复杂的部分和堆栈来以最佳方式加载资源和内容。整个问题来自于这样一个事实，即在我发送回浏览器的这一小段 html 代码中，我忘记了在最底部的单个标记中的一小段 <style>我的 .blade.php 文件，出于某种原因，它是在 @endsection 指令之后留下的。所以基本上 laravel 决定，它应该优先于 section 标签中的内容并将它首先发送到我的主视图（这导致它呈现在浏览器呈现的整个文档之上）。嘘，这很难。感谢您的回复和帮助！

Bootstrap 4: selectpicker 1.13 不能正确匹配所选选项的内容

Bootstrap 4: selectpicker 1.13 doesn't properly fit selected option's content

css

bootstrap-4

bootstrap-selectpicker