引导-选择表单中的宽度
我正在使用引导v4和引导-选择js/css (在ASP.NET MVC项目中)，我的form有一个问题。来自select的multiple选项比其他的inputs要宽，尽管它是在div和class="form-control"中。输出如下所示：
如您所见，dropdown的专长领域比inputs的其他部分要大得多。我试图编辑bootstrap-select.css并更改width:auto，但没有工作。我能做些什么来匹配我另一个inputs的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>现在看起来好多了，但仍然是个问题：
回答 2
Stack Overflow用户
发布于 2017-09-20 07:23:49
一旦我理顺了一些外部依赖，我就能够让它开始工作了。需要注意的一件事是所需的版本。JQuery 1.8.0+和引导版本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>查看柱塞实例
Stack Overflow用户
发布于 2017-09-20 07:00:56
您最好尝试使用data-width属性设置select的宽度。
将data-width设置为auto为，自动将select的宽度调整为其最宽的选项。fit 自动将选择的宽度调整为其当前选择的选项的宽度。也可以指定确切的值，例如300px或50%.
所以我建议你用这样的方法
<select class="selectpicker" data-width="100%">
...
</select>因此，在您的情况下更好地使用- data_width = "100%"，如果它更宽，然后根据您的需要更改宽度，例如，75%或50%.
希望这对你有帮助。
https://stackoverflow.com/questions/46314504
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号