web-dev-qa-db-ja.com

フォームのブートストラップ選択幅

Bootstrap v4およびbootstrap-select js/css（ASP.NET MVCプロジェクト））を使用していて、formに問題があります。selectとbootstrap-selectのmultipleオプションclass="form-control"を使用してinputs内にあるにもかかわらず、divの残りの部分よりも幅が広くなっています。出力は次のようになります。 enter image description here

ご覧のように、Field Of Expertise dropdownは、他のinputsよりもはるかに大きいです。 bootstrap-select.cssを編集してwidth:autoを変更しようとしましたが、うまくいきませんでした。他のwidthのinputsと一致させるために何かできることはありますか？

私のコードはこのようなものです

<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>

UPTADE：

フォームグループを次のように変更しました（@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>

そして今は少し良く見えますが、それでも問題があります： enter image description here

csstwitter-bootstraprazorasp.net-mvc-5bootstrap-select
4
Robert

いくつかの外部依存関係を修正した後、それを機能させることができました。注意が必要なのは、必要なバージョンです。 JQuery 1.8.0+およびbootstrapバージョン4は私にとっては機能しませんでした。3.3.6で機能させることができました。

<!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script data-require="[email protected]" 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の例を確認してください

2
IMA Coden

data-width属性を使用して、選択の幅を設定します。

セットする data-width to auto toselectの幅を最も広いオプションに自動的に調整します。 fitselectの幅を現在選択されているオプションの幅に自動的に調整します。正確な値も指定できます。 300pxまたは50%.

だから私はあなたがこのようなものを使用することをお勧めします

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

だからあなたのケースではよりよく使う-@data_width = "100%"および幅が広い場合は、必要に応じて幅を変更します。例：75%または50%.

ソースリンク

これがお役に立てば幸いです。

16
weBBer