twitter-bootstrap bootstrap 3.0 多文本框水平形式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18663618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3.0 multiple textbox in horizontal form issue
提问by irfanmcsd
I am trying to display three small text box elements within horizontal form group class. using code
我试图在水平表单组类中显示三个小文本框元素。使用代码
<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>
Result:
结果：
Is there a better approach to display multiple text boxes near to each other. Rest of elements in form display horizontally.
是否有更好的方法来显示彼此靠近的多个文本框。表单中的其余元素水平显示。
Update#
更新＃
After using inline form class with lots of other modifications, i got proper result. here is updated code.
在使用带有许多其他修改的内联表单类之后，我得到了正确的结果。这是更新的代码。
<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>
Correct Result:
正确结果：
回答by al_manchester
This answer really helped me work out my form with BS3.
这个答案真的帮助我用 BS3 制定了我的表格。
However I wanted it to look like this:
但是我希望它看起来像这样：
So, I amended the above and added the 'sr-only' class to the labels I wanted to hide (so screen-readers still pick them up), and changed the col sizes.
所以，我修改了上面的内容并将“sr-only”类添加到我想要隐藏的标签中（所以屏幕阅读器仍然可以选择它们），并更改了 col 大小。
(NOTE: the OP uses 'sronly' class not the 'sr-only' class which doesn't work for me)
（注意：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>
回答by Jon Harding
Yes use Inline Forms. Check their documentation
是的，使用内联表单。检查他们的文档
