Css 引导标签左对齐
我有以下标记:Css 引导标签左对齐,css,twitter-bootstrap,Css,Twitter Bootstrap,我有以下标记: <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
<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>
使可能
启用注释?
使可能
启用注释?
问题是标签文本不会向左浮动。即使将文本align:left添加到包含的div,它仍然不会向左对齐。我可能做错了什么
您需要向
控件标签添加文本对齐:左
样式
由于引导使用选择器.form horizontal.control label
,为水平表单中的标签提供文本对齐样式,因此需要使用相同或更具体的选择器:
.form-horizontal .control-label{
text-align: left;
}
将文本对齐属性设置为控件标签。全屏查看输出
.form水平控件标签{
文本对齐:左!重要;/*!重要在SO代码段中添加了优先级*/
}
使可能
启用注释?
使可能
启用注释?
请附上您的CSS。@TechWisdom没有自定义CSS。这只是我正在使用的引导css默认样式。您可以将上面的标记复制并粘贴到编辑器中,它将呈现相同的内容。我认为我们只允许向块级容器(例如div)添加文本样式。我读到你不应该像label一样将文本样式添加到内联元素中。@Donato由于引导,表单中的标签显示为inline block
。