Select2 Bootstrap 主题如何修复不正确的样式显示？答案

【问题标题】：Select2 Bootstrap theme How to fix incorrect stylind display?Select2 Bootstrap 主题如何修复不正确的样式显示？
【发布时间】：2021-03-13 08:22:45
【问题描述】：

我正在使用带有 Bootstrap 主题的 Select2 (https://github.com/ttskch/select2-bootstrap4-theme)。这是我的选择：

<select style="width: 100%;" id="languages_select" class="form-control js-example-basic-multiple" multiple="multiple" onchange="get_languages()">
    {% for id, name in languages.items %}
        <option value="{{ id }}">{{ name }}</option>
    {% endfor %}
</select>

我在显示此字段时遇到了一些错误。看起来这个问题与兼容性有关，但我使用的是受支持的 Bootstrap 4.1。例子：这个白色边框间隙似乎是由占位符文本跨度引起的，我无法在我的 html 中更改它，因为它是由 Select2 在完成所有操作后呈现的。这个很奇怪。这个删除按钮看起来没有样式。

我知道 jQuery、CSS 或 JS 的链接顺序会导致问题，所以这是我的导入顺序：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

UPD：更改顺序后选择

【问题讨论】：

标签： html css bootstrap-4 jquery-select2

【解决方案1】：

正如您所说，导入 css 的顺序很重要。因此您需要将您的 css 链接顺序重新排序为：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">    
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

确保在使用 select2 初始化选择时也将主题设置为 bootstrap4。像这样：

    $('select').select2({
        theme: 'bootstrap4',
    });

https://github.com/ttskch/select2-bootstrap4-theme的自述文件中提到了这一点

这是一个工作示例：

$('select').select2({
        theme: 'bootstrap4',
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select class="form-control">
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
</select>

【讨论】：

这个订单让情况变得更糟:(我的 Select2 字段在它为空时变得更高。当它被选定的字段填充时没有任何变化。
相信你最近导入了bootstrap css。它应该是我的示例中的第一个导入。其次，您可能会在选择上应用另一个 css 规则。
我复制粘贴了你的导入。也许主要问题是我使用 django？我在我的 base.html 中加载引导程序，然后在 base.html 头部的额外块中加载 css 和 js
您是否对id="languages_select" 或class="js-example-basic-multiple" 应用了任何特殊的CSS 规则？
仅style="width: 100%;" 和 ``` $(document).ready(function() { $('.js-example-basic-multiple').select2({ placeholder: 'Выберите языки' , 主题: 'bootstrap4', }); }); ``` 是的，我可以删除占位符，但这不是一个合适的解决方案。而这只是问题的 10%