如何让Bootstrap 5的select元素宽度适配内容？

你可以通过给<select>元素添加Bootstrap内置的宽度工具类来实现需求，无需自定义额外CSS：

1. 修改<select>的class属性，在form-control基础上添加w-auto：

<div class="col-md-12">
    <div class="mb-3">
        <label asp-for="Schedule.Minutes" class="control-label"></label>
        <select asp-for="Schedule.Minutes" class="form-control w-auto" asp-items="Model.MinutesOptions"></select>
        <span asp-validation-for="Schedule.Minutes" class="text-danger"></span>
    </div>
</div>

2. 原理说明：
   • form-control保留了Bootstrap表单控件的默认样式（边框、圆角、内边距等），保证和其他元素样式统一
   • w-auto是Bootstrap的宽度工具类，会覆盖form-control默认的width: 100%设置，让元素宽度自动适配其内部最长的选项内容

如果需要让<select>和其他元素在同一行显示，还可以额外添加d-inline-block类：

<select asp-for="Schedule.Minutes" class="form-control w-auto d-inline-block" asp-items="Model.MinutesOptions"></select>

内容的提问来源于stack exchange，提问作者Jonathan Wood