Question

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

使用以下代码：

<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）错过了告诉它在哪里定位内容所需的一些属性（文本 - 包含元素div.filter-option-inner）以及如何处理它。

插件的来源（意味着与Bootstrap Select插件的Bootstrap 4版本正式兼容）：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文件中，它仍然显示出混乱。我真的很无能为什么会发生这种情况！

Answer 1

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

Answer 2

如果你想下拉大小等于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>

Bootstrap 4：selectpicker 1.13无法正确适合所选内容

2 个答案: