Bootstrap 下拉菜单无法在移动设备上正确呈现

Question

当我在桌面上查看我的项目时，所有下拉菜单都对齐且齐平，这看起来非常好，当我最小化浏览器以在移动设备上查看时，这就是它的样子，

如您所见，所有下拉菜单的大小都不同，我不确定这是怎么发生的？我知道它考虑到你在每个内容中的内容，即每个单词有多长，但在 bootstrap 内是否有安全的方法我可以为所有下拉菜单实现固定宽度，无论它是否在 mobile/tablet 或桌面？这是我当前对上图的标记

 <div class="row col-lg-12">
        <div class="col-lg-5">
            <div class="form-group">
                <label class="col-lg-4 control-label">Country</label>
                <div class="col-lg-8 input-group">
                    @Html.DropDownListFor(m => m.UserDetails.SelectedCountry, Model.UserDetails.ListCountries, "Please Select Country", new { @class = "form-control", onchange = "javascript:this.form.submit();" })
                </div>
            </div>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-5">
            <div class="form-group">
                <label class="col-lg-4 control-label">State</label>
                <div class="col-lg-8 input-group">
                    @Html.DropDownListFor(m => m.UserDetails.SelectedState, Model.UserDetails.ListStates, new { @class = "form-control", onchange = "javascript:this.form.submit();" })
                </div>
            </div>
        </div>
        <div class="col-lg-1"></div>
    </div>
    <div class="row col-lg-12">
        <div class="col-lg-5">
            <div class="form-group">
                <label class="col-lg-4 control-label">City</label>
                <div class="col-lg-8 input-group">
                    @Html.DropDownListFor(m => m.UserDetails.SelectedCity, Model.UserDetails.ListCities, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-5">
            <div class="form-group">
                <label class="col-lg-4 control-label">Postcode</label>
                <div class="col-lg-8 input-group">
                    @Html.TextBoxFor(m => m.UserDetails.Postcode, new { @class = "form-control", Placeholder = "Your Postcode", maxlength = "12" })
                </div>
            </div>
        </div>
        <div class="col-lg-1"></div>
    </div>

Answer 1

应该可以工作，因为根据 Bootstrap example，任何带有 .form-control class 的控件默认情况下都应该有 width:100%。

不过我注意到您的 class 行分配存在问题。它应该是这样的：

<div class="row">
  ...
</div>

和不：

<div class="row col-lg-12">
  ...
</div>

如果有帮助请告诉我！

Bootstrap 下拉菜单无法在移动设备上正确呈现

Bootstrap dropdown's do not render correctly on mobile

html

css

twitter-bootstrap

asp.net-mvc-5.2