Bootstrap 下拉列表的宽度是否可变？答案

【问题标题】：Is the width of the Bootstrap Dropdownlist changable?Bootstrap 下拉列表的宽度是否可变？
【发布时间】：2018-12-16 15:23:42
【问题描述】：

我使用 Visual Studio 2015 创建 asp.net MVC Web 项目，当我创建剃刀视图的 UI 表单时使用 Bootstrap。我想通过使用以下代码来增加 Bootstrap Dropdownlist 的宽度，但是代码不起作用，bootstrap dropdownlist 的宽度可以改变吗？

<div class="form-group">
        <div class="col-xs-3 text-right">
            <label for ="coordDesc">Coord </label>  
        </div>   
        <div class="col-xs-9" id="t1">                                
                    @Html.DropDownList("MovieType", new SelectList(ViewBag.MovieType, "Value", "Text"), new { @class = "form-control", style = "width:1200px;" })           
        </div>
 </div>

【问题讨论】：

您确定容器是 1200 像素（减去表单控件使用的边距）吗？使用 F12 工具进行验证。
是的，我确信，实际上，您可以通过使用我的代码创建一个简单的测试用例来验证它，如果您有不同的结果，请告诉我。谢谢

标签： asp.net-mvc twitter-bootstrap razor

【解决方案1】：

您可以通过调整引导网格来更改下拉列表的宽度。由于form-control 类，下拉菜单的宽度将根据其父级的width 自动调整。希望这会有所帮助！

参考：https://getbootstrap.com/docs/4.0/components/forms/#form-controls

<div class="form-group row">
    <div class="col-sm-2 text-right">
        <label for ="coordDesc">Coord </label>
    </div>
    <div class="col-sm-10">
        <select class="form-control">
            <option>-</option>
        </select>
    </div>
</div>

http://jsfiddle.net/aq9Laaew/81455/

【讨论】：

我正在使用 Visual Studio 2015 mvc 模板开发我的 mvc web 应用程序，所有视图都基于此模板，您的代码在此模板中不起作用。经过进一步测试，我发现如果我在_Layout.cshtml文件中将下面的.css文件注释掉，那么效果很好， @ViewBag.Title - 我的 ASP.NET 应用程序 @*@Styles.Render("~/Content/css")*@ //我注释掉了这行代码。 @Scripts.Render("~/bundles/modernizr")
但是这个@Styles.Render("~/Content/css") 文件是mvc模板提供的，如果我把它去掉，整个UI都会受到影响，有什么办法可以保留它并且还可以改变下拉列表的宽度？
你可以使用max-width属性。
试试这个：@Html.DropDownList("MovieType", new SelectList(ViewBag.MovieType, "Value", "Text"), new { @class = "form-control", style = "max-width: 100%" })
max-width 只是将宽度调整为内容的最大长度，我认为只要显示内容的最大长度就可以了，

【解决方案2】：

什么对我有用：
@Html.DropDownList("MovieType", new SelectList(ViewBag.MovieType, "Value", "Text"), new { @class= "form-control", style = "max-width: 100%" }) 我从L Cruz 的评论中得到了这个答案

【讨论】：