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

私はBootstrap v4とbootstrap-select js/css（ASP.NET MVCプロジェクト内）を使用していますが、私はformに問題があります。 divにclass="form-control"が含まれていても、のmultipleのオプションは、bootstrap-selectの残りの部分よりも広いです。inputsです。出力は次のようなものになります。あなたが見ることができるようにブートストラップ - フォームの幅を選択

を、専門知識dropdownの分野はinputsの残り、その後方法も大きいです。 bootstrap-select.cssを編集してwidth:autoを変更しようとしましたが、機能しませんでした。他のinputsのwidthと一致させるためにできることはありますか？

が、私はこのようなものになりましフォーム・グループを変更（@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>

そして今

私のコードは、この

<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ようになります少し上手く見えますが、それでも問題です：

出典

2017-09-20 Robert

ないをチェックしてください。これは第三者図書館からのものですか？ –

はい、https://silviomoreto.github.io/bootstrap-select/ – Robert

いくつかの外部依存関係を整理すると、私はそれを動作させることができました。注意が必要なのは、必要なバージョンです。 JQuery 1.8.0+とブートストラップバージョン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>

"selectpicker" に精通しPlunker example

出典

2017-09-20 07:23:49

あなたはより良い選択の幅を設定するdata-width

data-width属性を使用してみてください。 data-width〜auto〜は、選択範囲の幅を最大幅のオプションに自動的に調整します。 fitは、現在選択されているオプションの幅にセレクタの幅を自動的に調整します。正確な値は、例えば、300pxまたは

50%.は、だから私はあなたのケースよりよく使用されているので、この

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

ようなものを使用することができ提案します、指定することができます - @data_width = "100%"、その広いとしての幅を変更した場合あなたの必要性など、75%または50%.

Source link

ごとに私は目を願っていますあなたには助かりました。

出典

2017-09-20 07:00:56 weBBer

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

答えて

関連する問題