使用Select2后Bootstrap 5.3样式失效问题求助

问题现象 #

使用Bootstrap 5.3时，给下拉框应用Select2插件后，下拉功能正常，但Bootstrap的form-select样式不再生效。对比截图显示：

• 第一个下拉框同时应用Select2和Bootstrap，样式异常；第二个仅用Bootstrap，样式正常。
• 下拉展开功能正常，但整体样式不符合Bootstrap规范。

问题代码 #

资源引入代码 #

<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<!-- Bootstrap 5.3 -->

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/css/select2.min.css" rel="stylesheet" />

<!-- Include Select2 JS after jQuery -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/js/select2.min.js"></script>

页面下拉框代码 #

<select id="selUser" class="form-select" name="Country" aria-label="Default select example">
<option selected>Country</option>
 <?php foreach ($data as $item): ?>
  <option value="<?= $item['country_name'] ?>"><?= $item['country_name'] ?>  </option>
 <?php endforeach; ?>
</select>

<script>
$(document).ready(function() {
  $('#selUser').select2();
});
</script>

解决方法 #

原因说明 #

Select2会替换原生<select>的DOM结构，原生Bootstrap的form-select样式无法自动应用到新生成的Select2元素上，且原生Select2样式会覆盖Bootstrap的默认样式。

具体步骤 #

1. 引入Select2 Bootstrap 5适配主题
   确保加载适配Bootstrap 5的Select2主题样式（该主题需与Select2核心样式配合使用）。

2. 初始化Select2时指定Bootstrap主题
   修改Select2初始化代码，添加theme参数指定Bootstrap 5主题：

   $(document).ready(function() {
     $('#selUser').select2({
       theme: "bootstrap-5"
     });
   });
   

3. 调整样式加载顺序
   保持Select2相关CSS在Bootstrap CSS之后加载，确保主题样式能正确继承Bootstrap的全局样式变量。

备用方案：自定义适配样式 #

如果无法使用官方适配主题，可添加以下自定义CSS来匹配Bootstrap form-select的样式：

/* 适配Select2与Bootstrap 5的基础样式 */
.select2-container .select2-selection--single {
  height: calc(1.5em + .75rem + 2px);
  border-radius: var(--bs-border-radius);
  border-color: var(--bs-border-color);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.5em + .75rem);
  right: .75rem;
}

.select2-dropdown {
  border-radius: var(--bs-border-radius);
  border-color: var(--bs-border-color);
}

内容的提问来源于stack exchange，提问作者Sim Lee