引导标签左对齐

Question

我有以下标记：

<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>

问题是标签文本没有向左浮动。即使我向包含div添加了text-align：left，它仍然没有向左对齐。我可能做错了什么？

Answer 1

您需要向text-align: left添加.control-label样式。

因为bootstrap使用选择器.form-horizontal .control-label在水平表单中为标签提供文本对齐样式，所以您需要使用相同或更具体的选择器：

.form-horizontal .control-label{
    text-align: left;
}

JSFiddle

Answer 2

将text-align属性设置为.control-label。以全屏模式查看输出。

＆＃13;

＆＃13;

.form-horizontal .control-label {
  text-align: left !important; /* !important added for priority in SO snippet. */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;