Question

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

enter image description here

正如你所看到的所有下拉列表都是差异大小，我不确定这是怎么发生的？我知道它需要考虑你在每个单词中的内容，即每个单词有多长，但是在引导程序中是否有安全的方法我可以在移动/平板电脑或桌面上查看所有下拉菜单的固定宽度？这是我目前对上图的标记

 <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类的任何控件都应该有width:100%。

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

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

和不：

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

如果有帮助，请告诉我！

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

1 个答案: