Bootstrap-Select 表单中的宽度答案

【问题标题】：Bootstrap-Select width in formBootstrap-Select 表单中的宽度
【发布时间】：2018-03-01 01:39:38
【问题描述】：

我正在使用 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>

现在看起来好一点了，但还是有问题：

【问题讨论】：

不熟悉“selectpicker”。这是否来自第三方库？
是的，silviomoreto.github.io/bootstrap-select

标签： css twitter-bootstrap razor asp.net-mvc-5 bootstrap-select

【解决方案1】：

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

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

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

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

因此，在您的情况下，最好使用 - data_width = "100%"，如果它更宽，则根据您的需要更改宽度，例如 75% 或 50%.

Source link

我希望这对你有帮助。

【讨论】：

当您输入-ve 时，请对您遇到的问题发表评论，以便我也能理解错误并修复它。它也会对其他人有所帮助。 ty
谢谢，它可以工作，但是你的源链接坏了，应该是[this][1] [1]：developer.snapappointments.com/bootstrap-select/examples/#width
我已更改链接，很高兴我的解决方案解决了您的问题。

【解决方案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

【讨论】：