CSS 引导标签左对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31303482/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-30 11:21:10 来源:igfitidea点击:
bootstrap label align left
提问by Donato
I have the following markup:
我有以下标记：
<form accept-charset="UTF-8" action="/task_categories/1" class="form-horizontal" id="edit_task_category_1" method="post">
<div class="row">
<div class="col-md-4">
<div class="well">
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable">Enable?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][0][enable]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_0_enable" name="task_category[task_category_users_attributes][0][enable]" type="checkbox" value="true"></div></div>
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable Comment">Enable comment?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][0][comments_enabled]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_0_comments_enabled" name="task_category[task_category_users_attributes][0][comments_enabled]" type="checkbox" value="true"></div></div>
<input id="task_category_task_category_users_attributes_0_user_id" name="task_category[task_category_users_attributes][0][user_id]" type="hidden" value="1">
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable">Enable?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][1][enable]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_1_enable" name="task_category[task_category_users_attributes][1][enable]" type="checkbox" value="true"></div></div>
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable Comment">Enable comment?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][1][comments_enabled]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_1_comments_enabled" name="task_category[task_category_users_attributes][1][comments_enabled]" type="checkbox" value="true"></div></div>
<input id="task_category_task_category_users_attributes_1_user_id" name="task_category[task_category_users_attributes][1][user_id]" type="hidden" value="2">
</div>
</div>
</div>
</form>
The problem is the label text does not float left. Even when I add a text-align: left to the containing div, it still does not align left. What may I be doing wrong?
问题是标签文本不会向左浮动。即使我向包含的 div 添加 text-align: left ，它仍然不会左对齐。我可能做错了什么？
回答by George
You need to add a text-align: leftstyle to .control-label.
您需要将text-align: left样式添加到.control-label.
Because bootstrap gives labels within horizontal forms the text align style using the selector .form-horizontal .control-label, you need to use the same or a more specific selector:
因为 bootstrap 使用 selector 为水平表单中的标签提供了文本对齐样式.form-horizontal .control-label，所以您需要使用相同或更具体的选择器：
.form-horizontal .control-label{
text-align: left;
}
回答by Manoj Kumar
Set the text-align property to the .control-label. View output in Full screen.
将 text-align 属性设置为.control-label. 全屏查看输出。
.form-horizontal .control-label {
text-align: left !important; /* !important added for priority in SO snippet. */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form accept-charset="UTF-8" action="/task_categories/1" class="form-horizontal" id="edit_task_category_1" method="post">
<div class="row">
<div class="col-md-4">
<div class="well">
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable">Enable?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][0][enable]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_0_enable" name="task_category[task_category_users_attributes][0][enable]" type="checkbox" value="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable Comment">Enable comment?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][0][comments_enabled]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_0_comments_enabled" name="task_category[task_category_users_attributes][0][comments_enabled]" type="checkbox" value="true">
</div>
</div>
<input id="task_category_task_category_users_attributes_0_user_id" name="task_category[task_category_users_attributes][0][user_id]" type="hidden" value="1">
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable">Enable?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][1][enable]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_1_enable" name="task_category[task_category_users_attributes][1][enable]" type="checkbox" value="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable Comment">Enable comment?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][1][comments_enabled]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_1_comments_enabled" name="task_category[task_category_users_attributes][1][comments_enabled]" type="checkbox" value="true">
</div>
</div>
<input id="task_category_task_category_users_attributes_1_user_id" name="task_category[task_category_users_attributes][1][user_id]" type="hidden" value="2">
</div>
</div>
</div>
</form>