Question

我正在使用Bootstrap v4和bootstrap-select js / css（在ASP.NET MVC项目中），我的form出现了问题。来自select的{{1}} multiple选项bootstrap-select比我inputs的其他选项更广，即使它位于div class="form-control"中}}。输出看起来像这样：

如您所见，专业领域dropdown比inputs的其余部分大。我尝试修改bootstrap-select.css并更改width:auto，但没有成功。我可以做些什么来匹配我的其他width的{{1}}吗？

我的代码看起来像这样

inputs

UPTADE：

我现在将表单组更改为类似的内容（添加了<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"

现在它看起来好一点，但仍然是一个问题：

Answer 1

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

将data-width设置为auto至会自动将所选内容的宽度调整为最宽的选项。 fit 会自动将所选内容的宽度调整为当前所选选项的宽度。还可以指定精确值，例如， 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宽度形式

2 个答案: