1. дома
  2. Вопрос и ответ
  3. начальной загрузки этикетки выравнивание влево

начальной загрузки этикетки выравнивание влево

2015-07-08 4 views
1

У меня есть следующий код:начальной загрузки этикетки выравнивание влево

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

Проблема является текстовая метка не перемещается влево. Даже когда я добавляю text-align: слева к содержащему div, он по-прежнему не выравнивается влево. Что я могу делать неправильно?

enter image description here

источник

2015-07-08 Donato

+0

Приложите CSS. – TechWisdom

+0

@TechWisdom нет пользовательского CSS. Это просто стиль загрузки CSS, который я использую. Вы можете скопировать и вставить над разметкой в ​​редактор, и он сделает то же самое. – Donato

ответ

3

Вы должны добавить text-align: left стиль .control-label.

Поскольку самозагрузки дает этикетки в горизонтальных формах стиль текста выравнивания с помощью селектора .form-horizontal .control-label, вам нужно использовать те же или более конкретный селектор:

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

JSFiddle

источник

2015-07-08 20:57:08 George

+0

Я думал, что нам разрешено добавлять текстовые стили в контейнер уровня блока (например, div). Я читал, что вы не должны добавлять стили текста к встроенному элементу, например метке. – Donato

+0

@Donato Из-за бутстрапа, метки внутри форм отображаются как 'inline-block'. – George

1

Установите выравнивания текста свойства к .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>

источник

2015-07-08 20:57:51

Смежные вопросы

 Смежные вопросы