twitter-bootstrap 窗体水平中右对齐的控件标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25668269/
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
Right aligned control labels in form-horizontal
提问by Miichi
I'm trying to do a two-column form that behaves as follows with Twitter Bootstrap (3.2.0):
我正在尝试使用 Twitter Bootstrap (3.2.0) 执行如下所示的两列表单：
- on extra-small (xs) screens, the second column is shown below the first column, control labels are shown above the input fields
- on small (sm) screens, the two columns are shown beside each other, control labels are shown above the input fields
- one medium (md) screens, the two columns are shown beside each other, control labels are horizontally aligned with their input fields
- 在超小 (xs) 屏幕上，第二列显示在第一列下方，控件标签显示在输入字段上方
- 在小（sm）屏幕上，两列并排显示，控件标签显示在输入字段上方
- 一个中 (md) 屏幕，两列并排显示，控件标签与其输入字段水平对齐
My code below (also at http://jsfiddle.net/mieckert/pfnbxbbo/) works with one issue: on small screens, the control labels are shown above their input fields, but they are right aligned (instead of proper left alignment).
我下面的代码（也在http://jsfiddle.net/mieckert/pfnbxbbo/ 上）处理一个问题：在小屏幕上，控件标签显示在其输入字段上方，但它们右对齐（而不是正确的左对齐） .
The cause of this is that bootstrap in forms.lessswitches on right alignment based on a media query:
造成这种情况的原因是 bootstrap 中的forms.less基于媒体查询的右对齐切换：
form-horizontal {
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
}
Is there a way I can teach bootstrap to use a different media query (say for @screen-md-min) without having to modify the bootstrap source itself, i.e., by overriding it in another less file that has an @import "bootstrap/less/bootstrap.less"? Especially is it possible to do this in a way that I'm not actually querying the screen width but rather the width of the current column? (Otherwise it would affect other forms that have a single column layout and still align horizontally as well.) Or are there any other, better ways to achieve the responsive behavior I described?
有没有一种方法可以教引导程序使用不同的媒体查询（例如 for @screen-md-min）而不必修改引导程序源本身，即通过在另一个具有@import "bootstrap/less/bootstrap.less"? 特别是是否有可能以我实际上不是在查询屏幕宽度而是当前列的宽度的方式来执行此操作？（否则它会影响具有单列布局并且仍然水平对齐的其他表单。）或者有没有其他更好的方法来实现我描述的响应行为？
<div class="container-fluid">
<form class="form-horizontal" role="form" action="#">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group col-xs-12 col-sm-12 col-md-12">
<label class="control-label col-xs-12 col-sm-12 col-md-3">First name</label>
<div class="col-xs-12 col-sm-12 col-md-9">
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12">
<label class="control-label col-xs-12 col-sm-12 col-md-3">Last name</label>
<div class="col-xs-12 col-sm-12 col-md-9">
<textarea class="form-control">
</textarea>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group col-xs-12 col-sm-12 col-md-12">
<label class="control-label col-xs-12 col-sm-12 col-md-3">Phone number</label>
<div class="col-xs-12 col-sm-12 col-md-9">
<textarea class="form-control">
</textarea>
</div>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12">
<label class="control-label col-xs-12 col-sm-12 col-md-3">Remarks</label>
<div class="col-xs-12 col-sm-12 col-md-9">
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
</div>
</form>
</div>
回答by mccannf
You could add the class left-labelto each of your labels in the form above, and then use this CSS to left-align the text:
您可以将类添加left-label到上面表单中的每个标签，然后使用此 CSS 左对齐文本：
label.col-sm-12.left-label {
text-align: left;
}
回答by Derek
I was having the same problem where I wanted labels to appear above the input for xs screen size via col-xs-12. I came up with the following media query and use of !important to override the text-align right that bootstrap applied:
我遇到了同样的问题，我希望标签通过 col-xs-12 出现在 xs 屏幕尺寸的输入上方。我想出了以下媒体查询并使用 !important 来覆盖 bootstrap 应用的文本对齐权限：
@media (min-width: 768px) {
label.col-xs-12 {
text-align: left !important;
}
}
