Bootstrap-Select宽度形式
Rob*_*ert 4 css razor twitter-bootstrap asp.net-mvc-5 bootstrap-select
我正在使用Bootstrap v4和bootstrap-select js/css(在ASP.NET MVC项目中),我的问题在于我的问题form.在select与multiple选项从bootstrap-select比我的更广泛的休息inputs,即使它是在div用class="form-control".输出看起来像这样:
正如您所看到的,专业领域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>
而现在它看起来好一点,但仍然是一个问题:
weB*_*Ber 12
你最好试试用 data-width
data-width属性设置选择的宽度.设置auto要fit以自动调节选择的宽度最宽的选择.300px 自动将选择的宽度调整为当前所选选项的宽度.也可以指定精确值,例如,50%.或@data_width = "100%"
所以我建议你使用这样的东西
<select class="selectpicker" data-width="100%">
...
</select>
所以在你的情况下更好地使用 - 75%如果它更宽,然后根据你的需要改变宽度,例如,50%.或data-width
我希望这对你有所帮助.
一旦我理顺了一些外部依赖关系，我就能让它工作。需要注意的一件事是所需的版本。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>
| 归档时间： |
|
| 查看次数： |
14582 次 |
| 最近记录： |