Html 选择2引导主题如何修复不正确的样式显示？

我正在使用Select2和引导主题（）。 这是我的选择：

<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>

{id为%s，名称为languages.items%}
{{name}}
{%endfor%}

我在显示这个字段时出现了一些错误。看起来这个问题与兼容性有关，但我使用的是受支持的引导程序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：更改订单后选择

---

正如您所说，导入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>

在的自述文件中提到了这一点

以下是一个工作示例：

$（'select'）。选择2({
主题：“bootstrap4”，
});

选择1
选择2
选择3
选择4
这个订单让情况变得更糟：（我的Select2字段为空时变高了。当它充满choosed字段时，没有任何变化。我相信你最近导入了引导css。这应该是第一次导入。看看我的示例。第二次你可能在Select2上应用了另一个css规则。我复制粘贴了你的导入。可能主要问题是我使用了django？我加载了boo。）tstrap在my base.html中，然后在base.html头部的额外块中加载css和js。准备好（function（）{$（'.js-example-basic-multiple'）。选择2({占位符：“bootstrap4”主题：“`是的，我可以删除占位符，但这不是一个正确的解决方案。这只是问题的10%