引导 - 在窗体中选择宽度

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

引导 - 在窗体中选择宽度

回答

相关问题