Bootstrap 5.3.3中如何让form-select适配选项宽度？

方案一：JavaScript动态计算选中文本宽度 #

之前的不稳定问题多源于直接读取select宽度的误差，可通过创建隐藏的“镜像”元素精准计算文本宽度，再同步给select：

<div class="dropdown">
  <select id="language-select" class="form-select border-0 bg-transparent" aria-label="Default select">
    <option value="index.php">English</option>
    <option value="index_NL.php">Nederlands</option>
    <option value="index_DE.php">Deutsch</option>
    <option value="index_IT.php">Italiano</option>
  </select>
  <!-- 隐藏镜像元素，用于模拟文本渲染宽度 -->
  <span id="text-mirror" style="position:absolute; visibility:hidden; white-space:nowrap; font-family:inherit; font-size:inherit; padding:inherit;"></span>
</div>

<script>
const select = document.getElementById('language-select');
const mirror = document.getElementById('text-mirror');

function adjustSelectWidth() {
  const selectedText = select.options[select.selectedIndex].text;
  mirror.textContent = selectedText;
  // 加上箭头所需宽度（可根据实际样式调整数值）
  select.style.width = `${mirror.offsetWidth + 30}px`;
}

// 页面加载初始化
window.addEventListener('load', adjustSelectWidth);
// 选项切换时重新计算
select.addEventListener('change', adjustSelectWidth);
</script>

方案二：CSS自定义箭头+fit-content宽度 #

替换Bootstrap默认的背景图箭头，用伪元素实现紧跟文本的箭头，同时让select宽度自适应内容：

<div class="dropdown">
  <select id="language-select" class="form-select border-0 bg-transparent custom-fit-select" aria-label="Default select">
    <option value="index.php">English</option>
    <option value="index_NL.php">Nederlands</option>
    <option value="index_DE.php">Deutsch</option>
    <option value="index_IT.php">Italiano</option>
  </select>
</div>

<style>
.custom-fit-select {
  /* 移除Bootstrap默认背景箭头 */
  background-image: none;
  /* 宽度自适应内容 */
  width: fit-content;
  /* 给自定义箭头留出空间 */
  padding-right: 2.5rem;
  position: relative;
}

/* 自定义下拉箭头，匹配Bootstrap风格 */
.custom-fit-select::after {
  content: "\25BC";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6c757d;
}
</style>

方案三：改用Bootstrap Dropdown组件 #

若原生select限制过多，直接用Dropdown组件实现，灵活性更强：

<div class="dropdown">
  <button class="btn border-0 bg-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    English
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="index.php">English</a></li>
    <li><a class="dropdown-item" href="index_NL.php">Nederlands</a></li>
    <li><a class="dropdown-item" href="index_DE.php">Deutsch</a></li>
    <li><a class="dropdown-item" href="index_IT.php">Italiano</a></li>
  </ul>
</div>

<script>
const dropdownBtn = document.querySelector('.dropdown-toggle');
const dropdownItems = document.querySelectorAll('.dropdown-item');

dropdownItems.forEach(item => {
  item.addEventListener('click', function() {
    dropdownBtn.textContent = this.textContent;
  });
});
</script>

内容的提问来源于stack exchange，提问作者Vincent Verbon