Bootstrap下拉列表无法在移动设备上正确呈现

Question

当我在台式机上查看我的项目时，所有下拉列表都对齐并齐平，这看起来非常不错；当我最小化浏览器以在移动设备上查看时，它就是这样

如您所见，所有下拉列表都是不同大小的，我不确定这是怎么发生的？ 我知道它要考虑到每个单词的内容，即每个单词有多长时间，但是引导程序中是否存在一种安全的方法，无论在移动设备/平板电脑还是台式机上查看，所有下拉菜单都可以达到固定宽度？ 这是我上面图片的当前标记

 <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示例进行操作 ，默认情况下，任何具有.form-control类.form-control都应具有width:100% 。

我注意到您的行的类分配有问题。 它看起来应该像这样：

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

而不是

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

让我知道是否有帮助！