将 bootstrap class 应用到我的 Html.DropDownListFor 使我的下拉列表太大

Question

我正在开发一个 asp.net mvc web 应用程序，我在我的 razor 视图中写了以下内容，我将 form-control class 添加到我的 Html.DropDownListFor： -

<div class="form-group">
<label >Account </label> @Html.DropDownList("CustomerList", new SelectList(ViewBag.AllCustomers, "CustomerID", "Name",Model.currentfiltercustomer), "<< All Customers >>",new { @class = "form-control" } ) </div>

这里是生成的标记：-

<div class="form-group">
<label >Account </label> <select class="form-control" id="CustomerList" name="CustomerList"><option value="">&lt;&lt; All Customers &gt;&gt;</option>

<option value="10">AccountTest</option>
<option value="11">Customer 200</option>
<option value="12">CustomerNew</option>
<option value="13">customerOne</option>
<option value="14">Dummy Account</option>
<option value="15">My Org Inc</option>
<option value="16">new 123</option>

<option value="18">test new account name</option>
</select> </div>

但结果不是很愉快，下拉列表几乎占据了整个页面：-

Answer 1

.form-control class 的宽度为 100%。您可以将 select 包裹在网格列中以强制执行所需的宽度。 Here's the relevant section 来自 Bootstrap 3 个文档。或者，更简单（但不太灵活），您可以显式设置元素的宽度。例如：

@Html.DropDownList("CustomerList", new SelectList(ViewBag.AllCustomers, "CustomerID", "Name",Model.currentfiltercustomer), "<< All Customers >>",new { @class = "form-control", style="width:200px" } )

将 bootstrap class 应用到我的 Html.DropDownListFor 使我的下拉列表太大

Apply a bootstrap class to my Html.DropDownListFor have made my dropdown list too huge

html

asp.net-mvc

html-helper

razor

twitter-bootstrap