html - How to align input box with a few sr-only labels in bootstrap -


i'm trying format form page bootstrap, of inputs have visible labels , others don't. according bootstrap documentation(column sizing section) have wrap in "row" classes set size of inputs, when add sr-only class labels doesn't fit. suggestions? here fiddle, typeid , dv not aligned

general information

                <div class="form-group col-xs-6">                     <label class="control-label" for="fullname">full name</label>                      <input id="fullname" name="fullname" type="text"                            class="form-control input-md"></input>                 </div>                      <div class="form-group col-xs-2">                         <label class="control-label  sr-only" for="typeid">type id</label>                          <select id="typeid" name="typeid" class="form-control  input-md ">                             <option value="cc">cc</option>                             <option value="nit">nit</option>                             <option value="nuip">nuip</option>                             <option value="ce">ce</option>                             <option value="pa">pa</option>                             <option value="ti">ti</option>                         </select>                 </div>                 <div class="form-group col-xs-3">                     <label class="control-label" for="id">id</label>                      <input id="id" name="id" type="text" class="form-control input-md"></input>                 </div>                 <div class="form-group col-xs-1">                         <label class="control-label sr-only" for="dv">dv</label>                         <input id="dv" name="dv" type="text"                                class="form-control input-md"></input>                 </div>               </fieldset> 

a quick (and hacky!) fix add label after sr-only label contains &nbsp; , no for attribute:

demo

<div class="form-group col-xs-2">     <label class="control-label  sr-only" for="typeid">type id</label>     <label class="control-label">&nbsp;</label>     <select id="typeid" name="typeid" class="form-control  input-md ">         <option value="cc">cc</option>         <option value="nit">nit</option>         <option value="nuip">nuip</option>         <option value="ce">ce</option>         <option value="pa">pa</option>         <option value="ti">ti</option>     </select> </div> 

Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -