Bootstrap-Select 表格宽度

Question

我正在使用 Bootstrap v4 和 bootstrap-select js/css（在 ASP.NET MVC 项目中），我的 form。 bootstrap-select 中带有 multiple 选项的 select 比我的 inputs 的其余部分更宽，即使它位于带有 class="form-control" 的 div 中。输出看起来像这样：

如您所见，专业领域 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 属性来设置 select.

的宽度

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

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

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

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

Source link

希望对您有所帮助。

Answer 2

一旦我理清了一些外部依赖关系，我就能够让它工作。要注意的一件事是所需的版本。 JQuery 1.8.0+ 和 bootstrap 版本 4 对我不起作用。我能够让它与 3.3.6 一起工作。

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script data-require="jquery@1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <!-- (Optional) Latest compiled and minified JavaScript translation files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
  </head>

  <body class="container">

      <div class="form-group">
        <label for="test0">test</label>
        <input id="test0" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label for="test1">drop down</label>
        <select id="test1" class="form-control" type="text">
          <option>One</option>
          <option>Two</option>
          <option>Three</option>
          </select>
      </div>
      <div class="form-group">
        <label >test 1</label>
        <select id="test2" class="selectpicker form-control" multiple>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
        </select>
      </div>
  </body>

</html>

查看 Plunker example

Bootstrap-Select 表格宽度

Bootstrap-Select width in form

css

twitter-bootstrap

razor

asp.net-mvc-5

bootstrap-select