css - Bootstrap-在表单中选择宽度

Question

我正在使用 Bootstrap v4 和 bootstrap-select js/css(在 ASP.NET MVC 元素中)并且我的表单有问题。 bootstrap-select 中带有 多个 选项的 select 比我的其他 inputs 更宽，即使它在带有 class="form-control" 的 div。 输出看起来像这样:

如您所见，Field Of Expertise 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>

现在看起来好多了，但问题依然存在:

Answer 1

您最好尝试使用 data-width 属性来设置选择的宽度。

将 data-width 设置为 auto 以自动将选择的宽度调整为其最宽选项。 fit 自动将选择的宽度调整为其当前所选选项的宽度。也可以指定一个确切的值，例如300px 或 50%.

所以我会建议你使用这样的东西

<select class="selectpicker" data-width="100%">
  ...
</select>

所以在你的情况下更好地使用 - data_width = "100%" 如果它更宽，然后根据你的需要改变宽度例如，75% 或 50%.

Source link

希望对您有所帮助。