twitter-bootstrap 表单中的 Bootstrap-Select 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46314504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap-Select width in form
提问by Robert
I'm using Bootstrap v4 and bootstrap-select js/css (in ASP.NET MVC project) and I have a problem in my form. The selectwith multipleoptions from bootstrap-selectis wider than the rest of my inputs, even though it's in a divwith class="form-control".
The output looks something like this:
我正在使用 Bootstrap v4 和 bootstrap-select js/css（在 ASP.NET MVC 项目中），但我的form. 来自的selectwithmultiple选项bootstrap-select比 my 的其余部分更宽inputs，即使它在divwith 中class="form-control"。输出如下所示：
As you can see, Field Of Expertise dropdownis way larger then the rest of the inputs. I tried to edit bootstrap-select.cssand change width:auto, but didn't work. Is there anything I can do to match the widthof my other inputs?
如您所见，专业领域dropdown比inputs. 我试图编辑bootstrap-select.css和更改width:auto，但没有奏效。有什么我可以做的来匹配width我的另一个inputs吗？
My code looks something like this
我的代码看起来像这样
<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:
更新：
I changed now the form-group to something like this (added @data_width = "auto"):
我现在将表单组更改为这样的（添加@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>
And now it looks a little bit better, but still a problem:
现在看起来好多了，但仍然是一个问题：
采纳答案by IMA Coden
I was able to get it to work once I straightened out some external dependencies. One thing to pay attention to is the versions required. JQuery 1.8.0+ and bootstrap version 4 didn't work for me. I was able to get it to work with 3.3.6.
一旦我理顺了一些外部依赖项，我就能够让它工作。需要注意的一件事是所需的版本。JQuery 1.8.0+ 和 bootstrap 版本 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>
Check out the Plunker example
回答by weBBer
You better try using data-widthattribute to set the width of the select.
您最好尝试使用data-width属性来设置选择的宽度。
Set data-widthto autoto automatically adjust the width of the select to its widest option. fitautomatically adjusts the width of the select to the width of its currently selected option. An exact value can also be specified, e.g. 300pxor 50%.
设置data-width要auto以自动调节的宽度选择到最宽的选择。fit自动将选择的宽度调整为其当前选择的选项的宽度。也可以指定一个确切的值，例如300px或50%.
So I will suggest you to use something like this
所以我会建议你使用这样的东西
<select class="selectpicker" data-width="100%">
...
</select>
So in your case better use - @data_width = "100%"and if its wider, then change the width as per your need e.g., 75%or 50%.
所以在你的情况下更好地使用 -@data_width = "100%"如果它更宽，那么根据你的需要改变宽度，例如，75%或者50%.
I hope this was helpful for you.
我希望这对你有帮助。
