[英]How to align input box with a few sr-only labels in bootstrap
I'm trying to format a form page with bootstrap, some of the inputs have visible labels and some others don't. 我正在尝试使用引导程序格式化表单页面,其中一些输入具有可见标签,而另一些则没有。 According to bootstrap documentation (Column sizing section) I have to wrap in "row" classes to set the size of inputs, but when i add sr-only class to some labels it doesn't fit.
根据引导程序文档 (列大小调整部分),我必须包装“行”类以设置输入的大小,但是当我将sr-only类添加到某些标签时,它不合适。 Any suggestions?
有什么建议么? Here is the fiddle , the TypeId and DV are not aligned
这是小提琴 ,TypeId和DV不对齐
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 is to add another label after your sr-only
label that contains only a
一种快速(而且很容易出错!)的解决方法是在
sr-only
包含
and no for
attribute: 否
for
属性:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.