html - 如何在 Bootstrap 中将输入框与一些 sr-only 标签对齐

Question

我正在尝试使用 bootstrap 格式化表单页面，一些输入有可见标签，而另一些则没有。根据bootstrap documentation (列大小调整部分)我必须包装在“行”类中以设置输入的大小，但是当我将 sr-only 类添加到某些标签时它不适合。有什么建议么？ Here is the fiddle , TypeId和DV没有对齐

一般信息

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

Answer 1

一个快速(和 hacky!)的修复方法是在您的 sr-only 标签之后添加另一个标签，该标签只包含一个   而没有 for属性:

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>