@H_301_1@我试图在水平表格组类中显示三个小文本框元素.使用代码
<div class="form-group">
<label class="col-lg-3 control-label input-sm">Date of Birth:</label>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-4">
<input type="text" id="txt_month" name="txt_month" class="form-control input-sm" placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" >
</div>
<div class="col-lg-4">
<input type="text" id="txt_day" name="txt_day" class="form-control input-sm" placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" >
</div>
<div class="col-lg-4">
<input type="text" id="txt_year" name="txt_year" class="form-control input-sm" placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" >
</div>
</div>
<p class="help-block"></p>
</div>
</div>
结果：
有没有更好的方法来显示彼此靠近的多个文本框.表单中的其余元素水平显示.
更新#
在使用带有许多其他修改的内联表单类之后,我得到了正确的结果.这是更新的代码.
<div class="form-group">
<label class="col-lg-3 control-label input-sm">Date of Birth:</label>
<div class="col-lg-7">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-3">
<label class="sronly" for="txt_month">Enter Month</label>
<input type="text" id="txt_month" name="txt_month" class="form-control input-sm" style="width:60px" placeholder="MM" required maxlength="2" data-validation-required-message="Month is required" >
</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<label class="sronly" for="txt_day">Enter Day</label>
<input type="text" id="txt_day" name="txt_day" class="form-control input-sm" style="width:60px" placeholder="DD" required maxlength="2" data-validation-required-message="Day is required" >
</div>
</div>
<div class="form-group">
<div class="col-lg-3">
<label class="sronly" for="txt_year">Enter Year</label>
<input type="text" id="txt_year" name="txt_year" class="form-control input-sm" style="width:60px" placeholder="YY" required maxlength="4" data-validation-required-message="Year is required" >
</div>
</div>
</div>
<p class="help-block"></p>
</div>
</div>
正确的结果：
解决方法
这个答案真的帮助我用BS3制作了我的表格.
但是我希望它看起来像这样：
所以,我修改了上面的内容并将’sr-only’类添加到我想要隐藏的标签中(因此屏幕阅读器仍然可以选择它们),并更改了col大小.
(注意：OP使用’sronly’类而不是’sr-only’类对我不起作用)
<div class="form-group">
<label class="col-lg-3 control-label ">City & County:</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Manchester" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. Lancashire" >
</div>
</div>
</div>
</div>
</div>