我正在使用Bootstrap v4和bootstrap-select js/css（在ASP.NET MVC项目中），我的form出现了一个问题。bootstrap-select中的select和multiple选项比我的inputs的其余部分更宽，即使它是在div和class="form-control"中。输出如下所示：
如您所见，dropdown的专业领域比inputs的其他部分大得多。我尝试编辑bootstrap-select.css并更改width:auto，但没有成功。我可以做些什么来匹配其他inputs的width吗？
我的代码如下所示
<div class="form-group">
@Html.LabelFor(v => v.BirthDate)
@Html.TextBoxFor(v => v.BirthDate, "{0:yyyy-MM-dd}", new { @class = "form-control", type = "date" })
@Html.ValidationMessageFor(v => v.BirthDate)
</div>
<div class="form-group">
@Html.LabelFor(v => v.ResidenceCountry)
@Html.TextBoxFor(v => v.ResidenceCountry, new { @class = "form-control" })
@Html.ValidationMessageFor(v => v.ResidenceCountry)
</div>
<div class="form-group">
@Html.LabelFor(m => m.CurrencyId)
@Html.DropDownListFor(m => m.CurrencyId, new SelectList(Model.Currencies, "Id", "Name"), "", new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.CurrencyId)
</div>
<div class="form-group">
@Html.LabelFor(m => m.FieldOfExpertiseIds)
@Html.ListBoxFor(m => m.FieldOfExpertiseIds, new MultiSelectList(Model.FieldOfExpertises, "Id", "Name"), new { @class = "selectpicker form-control", @data_selected_text_format = "count > 2", @data_size = "6" })
@Html.ValidationMessageFor(m => m.FieldOfExpertiseIds)
</div>更新日期：
我现在将窗体组更改为如下形式（添加了@data_width = "auto"）：
<div class="form-group">
@Html.LabelFor(m => m.FieldOfExpertiseIds)
<br />
@Html.ListBoxFor(m => m.FieldOfExpertiseIds, new MultiSelectList(Model.FieldOfExpertises, "Id", "Name"), new { @class = "selectpicker form-control", @data_selected_text_format = "count > 2", @data_size = "6" , @data_width="auto" })
@Html.ValidationMessageFor(m => m.FieldOfExpertiseIds)
</div>现在看起来好一点了，但还是有个问题：
2条答案
按热度按时间ktca8awb1#
您最好尝试使用**
data-width属性来设置选择的宽度。将
data-width设置为auto以自动将所选内容的宽度调整为其最宽选项**。fit自动将所选内容的宽度调整为其当前所选选项的宽度。也可以指定精确值，例如300px或50%.所以我建议你用这个
因此，在您的情况下，最好使用-
data_width = "100%"，如果它更宽，则根据需要更改宽度，例如75%或50%.源链接
希望这对你有帮助。
2ekbmq322#
在我理顺了一些外部依赖之后，我能够让它工作。需要注意的一件事是所需的版本。JQuery 1.8.0+和bootstrap version 4对我不起作用。我能够让它在3.3.6中工作。
查看Plunker example