html - Bootstrap dropdown's do not render correctly on mobile -

when view project on desktop dropdowns aligned , flush looks nice, when minimize browser view on mobile looks like,

as can see dropdowns difference sizes, i'm not sure how happened? i'm aware takes considering content have in each i.e how long each word there safe way within bootstrap can achieve fixed width dropdowns wether being viewed on mobile/tablet or desktop? current markup above picture

 <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> 

should work since according bootstrap example, control .form-control class should have width:100% default.

i noticed issue class assignments rows though. should so:

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

and not:

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

let me know if helps!