html - 如何在 Bootstrap 页面上设置一组下拉菜单以使用相同的宽度

Question

我在使用 Bootstrap (v3.3.6) 的 ASP.NET 站点上有一个页面。我正在使用 Razor 语法在页面上放置下拉选择输入，我遇到的问题是框的宽度似乎由其中的选项长度设置。相反，我想让所有这些下拉菜单具有相同的宽度。我知道我可以在 CSS 中指定一个特定的或最小/最大宽度来解决这个问题，但我想知道是否有 Bootstrap 类的任何组合可以以更动态的方式实现这个？

<div class="container-fluid">
        <div class="form-group">
            <div class="col-lg-6 col-md-6 col-sm-12">
                @Html.LabelFor(model => model.AssigneeTeam, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" })
                <div class="col-md-6 col-md-offset-1 col-sm-12">
                    @Html.DropDownListFor(model => model.AssigneeTeam,
     EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.AssigneeTeams)),
 new { htmlAttributes = new { @class = "form-control input-sm" } })
                    @Html.ValidationMessageFor(model => model.AssigneeTeam, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
                @Html.LabelFor(model => model.Priority, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" })
                <div class="col-md-6 col-md-offset-1 col-sm-12">
                    @Html.DropDownListFor(model => model.Level,
     EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.PriorityLevels)),
 new { htmlAttributes = new { @class = "form-control input-sm" } })
                    @Html.ValidationMessageFor(model => model.Priority, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
                @Html.LabelFor(model => model.AffectedComponent, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" })
                <div class="col-md-6 col-md-offset-1 col-sm-12">
                    @Html.DropDownListFor(model => model.AffectedComponent,         EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.EstateComponents)), new { htmlAttributes = new { @class = "form-control input-sm" } })
                    @Html.ValidationMessageFor(model => model.AffectedComponent, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12">
                @Html.LabelFor(model => model.Type, htmlAttributes: new { @class = "control-label col-md-5 col-sm-12 text-left" })
                <div class="col-md-6 col-md-offset-1 col-sm-12">
                    @Html.DropDownListFor(model => model.Type,
     EnumHelper.GetSelectList(typeof(WebApplication1.Models.RequestBase.ChangeType)),new { htmlAttributes = new { @class = "form-control input-sm" } })
                    @Html.ValidationMessageFor(model => model.Type, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
</div>

This is a screenshot of the result, as you can see the dropdowns vary in width

Answer 1

感谢@GL.awog 为我指明了正确的方向，我注意到这个问题源于我包装 new { @class = "form-control input-sm"} 使用 new { htmlAttributes = ...。这是在 @Html.DropDownListFor(...) Razor 代码块中。这样做意味着 Bootstrap 类没有被解释，因此选择没有以预期的方式显示。

htmlattributes 的使用使我们能够在 HTML 上指定属性作为创建编辑器模板的快捷方式，这里有更详细的解释:http://cpratt.co/html-editorfor-and-htmlattributes/