引导程序下拉菜单在手机上无法正确显示

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 example因为应工作当前的标记，与.form-control类中的任何控制应在默认情况下width:100%。

虽然我注意到您的班级分配问题。它应该看起来像这样：

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

和不：

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

让我知道这是否有助于！