Метка горизонтальной формы bootstrap-3 не остается в верхних полях ввода

При использовании Bootstrap 3 с .form-horizontal с классами начальной загрузки ниже я получаю формы с меткой сверху, что мне и нужно. http://bootply.com/73486

Однако на изображении 2 я пытаюсь уменьшить ширину до нужного размера, используя такие классы, как .col-lg-*, которые внезапно сдвигают метки в сторону, а не остаются сверху. Пробовал разные размеры - безрезультатно..

  <div class="form-group">
    <label class="control-label"> <%= f.label :title %></label>

     <div class="form-control">
       <%= f.text_field :title, :placeholder => "title" %>
     </div>

 </div>

Изображение 1

введите здесь описание изображения

Изображение 2

Однако, когда я пытаюсь обернуть входные данные в столбцы сетки, чтобы уменьшить ширину до нужного размера, метки перемещаются сбоку от входных данных формы, а не сверху.

 <div class="form-group">
   <label class="control-label col-lg-2"> <%= f.label :title %></label>
   <div class="col-lg-10">
     <div class="form-control">
      <%= f.text_field :title, :placeholder => "title" %>
    </div>
  </div>
 </div>

введите здесь описание изображения


css twitter-bootstrap twitter-bootstrap-3
person brg    schedule 11.08.2013    source источник
comment
Пожалуйста, предоставьте jsFiddle или Bootply   -  person PiLHA    schedule 11.08.2013

Ответы (3)


arrow_upward
3
arrow_downward

Код в вашем первом примере правильный. Чтобы уменьшить ширину без перехода к горизонтальному стилю формы, попробуйте обернуть всю группу форм (или набор полей) в меньший div.

<div class="col-lg-10">
     <div class="form-group">
        <label class="control-label"> <%= f.label :title %></label>

         <div class="form-control">
           <%= f.text_field :title, :placeholder => "title" %>
         </div>

     </div>
</div>
person Joe Conlin    schedule 11.08.2013

arrow_upward
2
arrow_downward 

`<div class="col-lg-10">
    <div class="form-group">
       <label class="control-label"> <%= f.label :title %></label>

       <%= f.text_field :title, :placeholder => "title", :class => "form-control" %>

 </div>
</div>`

Попробуй это

person Ankit    schedule 29.08.2013
comment
Спасибо за участие и демонстрацию того, как рельсы делают то же самое, что и принятый ответ. Вы переместили класс CSS в вспомогательную форму f.text_field рельсов, но он по-прежнему важен. Спасибо и ура - person brg; 30.08.2013

arrow_upward
1
arrow_downward

В этом случае вы можете дать форме col-lg-10. Поскольку вы на самом деле пытаетесь уменьшить размер формы, а не отдельного поля ввода, это было бы предпочтительнее.

Что касается вашего использования .form-horizontal. Если вам нравятся ярлыки сверху, вы не должны использовать .form-horizontal, просто форму без класса. Это также решит вашу проблему.

В Bootstrap 3 способ работы .form-horizontal сильно изменился. Сейчас это работает следующим образом: элемент формы помещается в div .col-x-x, чтобы придать ему желаемый размер и позволить меткам располагаться рядом с ним. Преимущество начальной загрузки 2 в том, что вы можете легко изменить ширину столбца метки.

PS .control-label больше не нужен

person JelteF    schedule 21.08.2013