我遇到一個(gè)問題，文字在選擇選單中懸停的 X「清除」按鈕下重疊。在右側(cè)添加填充並不是解決方案，因?yàn)樗鼘D標(biāo)推到框外。我正在使用此處找到的 Select2 JS 庫 https://select2.org/ 和 Bootstrap 5
$("#search_bar").select2({
theme: 'bootstrap-5',
placeholder: "Some text",
allowClear: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" />
<link rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="">
<select id="search_bar" class="form-select w-25">
<option value="1">
This is a long option string
</option>
<option value="2">
This is another long option string
</option>
</select>
</div>
2
0
0
依照此處的文檔操作 Select2 文檔。您可以使用 width: 'style' 和標(biāo)籤 <select> 中的內(nèi)聯(lián)樣式來擴(kuò)展 select2 寬度。這裡我將select的寬度設(shè)定為200px
#然後，透過查看 select2 的 DOM 結(jié)構(gòu)（使用 Chrome Devtool），我發(fā)現(xiàn)我們可以透過新增以下 CSS 來讓 X 按鈕不與文字重疊：
.select2-selection.select2-selection--single {
padding-right: 50px !important;
}
$("#search_bar").select2({
theme: 'bootstrap-5',
placeholder: "Some text",
allowClear: 真,
width: 'style'
});.select2-selection.select2-selection--single {
padding-right: 50px !important;
}
[email?protected]/dist/select2-bootstrap-5-theme.min.css" />
[email?protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXFonyjkDbrCEXFonyjginjginDun??okijginjDbrC21oBorD
