Bootstrap 4：selectpicker 1.13 不适合所选选项的内容答案

【问题标题】：Bootstrap 4: selectpicker 1.13 doesn't properly fit selected option's contentBootstrap 4：selectpicker 1.13 不适合所选选项的内容
【发布时间】：2018-05-23 11:11:58
【问题描述】：

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

使用以下代码：

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

如您所见，显示选择下拉列表本身没有问题，只是按钮（具有当前选定值的初始字段）由于某种原因出现了混乱。我怀疑这可能是插件本身的问题，因为我几乎没有应用任何可能会干扰的相关样式。我想收到一个建议，我怎样才能让它正常工作，因为我真的很喜欢这个插件，不想自己写所有的功能。我对 css 和理解它的结构不是很好。我查看了插件生成的源 html，它只是看起来父容器 (div.filter-option) 缺少一些需要告诉它在哪里放置内容的属性（包含文本的元素 @987654326 @) 以及如何处理。

插件来源（意为正式兼容Bootstrap 4版本的Bootstrap Select插件）：https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0 我的 Bootstrap 版本是 Laravel 5.6 Bootstrap 4.0 内置的默认版本。非常感谢您对问题的任何帮助/建议/分析！提前致谢！

更新 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 文件中时，它仍然显示混乱。我真的不知道为什么会发生这种情况！

【问题讨论】：

为什么不在选择器上应用样式并增加它的宽度...
试过了，确实有效。但我怀疑这是否是该插件的默认需要 brhaviour。另外它只解决了宽度问题。所有其他凌乱的布局仍然存在。所以我认为这种行为还有另一个主要原因。

标签： css bootstrap-4 bootstrap-selectpicker

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你想下拉大小等于选择，那么你可以使用这个 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>

【讨论】：

感谢您的回答，但这些样式已经由插件设置，因此它们现在不会影响任何东西。我怀疑这是一个与插件源相关的问题......或者某种外部干扰，但我肯定已经解决了......
但你可以使用!important覆盖它
是的，我明白了。我的意思是那些属性已经被设置为相同的值，但是布局却不能正常工作。正如我现在正在测试的那样，即使使用您提供的来源，它仍然显示不正确。（将整个内容粘贴到一个全新的.html 文件中，它仍然显示错误。这太奇怪了...
可能是 chache 问题复制这个 sn-p 代码制作新文件并检查它。
我想通了，看看我自己的答案