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
, no for
attribute:
<div class="form-group col-xs-2"> <label class="control-label sr-only" for="typeid">type id</label> <label class="control-label"> </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
Post a Comment