html - Bootstrap and multiple select controls inline too big -



html - Bootstrap and multiple select controls inline too big -

i'm using bootstrap , i'm looking have 2 list boxes next each other (one represents month other year) , 2 buttons move selected month/year list box. when place of in page it's wide (the list boxes way wide what's needed). how can these list boxes less in width, same height , normal bootstrap form-control list box?

<div class="form-inline"> <label for="selectmonth" class="control-label col-md-5">period:</label> <div class="col-md-7" style="display:inline"> <select id="selectmonth" class="form-control" size="4"> <option>jan</option> <option>feb</option> <option>mar</option> <option>apr</option> <option>may</option> <option>jun</option> <option>jul</option> <option>aug</option> <option>sep</option> <option>oct</option> <option>nov</option> <option>dec</option> </select> <select id="selectyear" class="form-control" size="4"> </select> <div class="btn-group-vertical"> <button type="button" class="btn btn-default btn-primary" id="buttonmoveall">>></button> <button type="button" class="btn btn-default btn-primary" id="buttonmoveone">></button> </div> <select id="selectfinal" class="form-control" size="4"> </select> </div> </div>

try jsfiddle

<div class="form-inline col-md-10"> <label for="selectmonth" class="control-label col-md-2">period:</label> <div class="col-md-4" style="display:inline"> <select id="selectmonth" class="form-control" size="4"> <option>jan</option> <option>feb</option> <option>mar</option> <option>apr</option> <option>may</option> <option>jun</option> <option>jul</option> <option>aug</option> <option>sep</option> <option>oct</option> <option>nov</option> <option>dec</option> </select> </div> <div class="col-md-4" style="display:inline"> <select id="selectyear" class="form-control" size="4"></select> <div class="btn-group-vertical"> <button type="button" class="btn btn-default btn-primary" id="buttonmoveall">>></button> <button type="button" class="btn btn-default btn-primary" id="buttonmoveone">></button> </div> <select id="selectfinal" class="form-control" size="4"></select> </div> </div>

html twitter-bootstrap-3

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -