引導 - 在窗體中選擇寬度

我正在使用Bootstrap V4和引導選擇js/css（在ASP.NET MVC項目中），我的問題在我的form中。 select與multiple選項從bootstrap-select是比我的其餘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>

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>

現在它看起來好一點，但仍然是一個問題：

來源

2017-09-20 Robert

不熟悉「selectpicker」。這是來自第三方圖書館嗎？ –

是的，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>

退房的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

引導 - 在窗體中選擇寬度

回答

相關問題