Многостоловые формы с полями

Извините за неопределенное название, я не был уверен, как лучше описать его. Я сейчас обновляю веб-сайт до начальной загрузки 3 и получаю небольшую проблему с несколькими входами в одной строке.

В bootstrap 2 я бы просто создал два .controls.controls-row с .spanX элементами внутри, чтобы создать необходимые столбцы. Однако, поскольку они удалены в bootstrap 3, я заменил их на .form-group и новые классы столбцов.

Если у меня есть две строки внутри формы (соответственно в этом поле), первая становится недоступной для редактирования, если вторая - это строка с одним столбцом (см. код и прикрепленный снимок экрана ниже).

Я проверил элементы с firebug и увидел, что .col-sm-12 из второго набора полей лежит над .form-group и не позволяет пользователю щелкнуть элементы внутри. Сначала в первом поле с .col-sm-12 все работает нормально.

Я также попытался разместить .row вокруг каждого .form-group, который решает проблему, но увеличивает ширину линии формы, поэтому она больше не имеет левого поля внутри набора полей.

Есть ли способ решить эту проблему без увеличения ширины строки формы?

Спасибо заранее!

EDIT: я добавил сгенерированный код как jsFiddle

%fieldset
  %legend= t('.login_information')
  .form-group
    .col-sm-12
      = f.label :login
      = f.text_field :login, :class => 'form-control', :required => true

  .form-group
    .col-sm-6
      = f.label :password
      = f.password_field :password, :class => 'form-control'
    .col-sm-6
      = f.label :password_confirmation
      = f.password_field :password_confirmation, :class => 'form-control'

%fieldset
  %legend= t('.personal_details')
  .form-group
    .col-sm-4
      = f.label :title
      = f.text_field :title, :class => 'form-control'
    .col-sm-4
      = f.label :firstname
      = f.text_field :firstname, :class => 'form-control', :required => true
    .col-sm-4
      = f.label :lastname
      = f.text_field :lastname,  :class => 'form-control', :required => true

  .form-group
    .col-sm-12
      = f.label :email
      = f.text_field :email, :class => 'form-control email', :required => true

Ответ 1

Есть несколько вещей, которые нужно настроить в вашем макете:

Вложенные элементы col находятся внутри элементов form-group. Это должно быть наоборот (form-group должен находиться внутри элемента col-sm-xx).
Вы всегда должны использовать div row для каждой новой "строки" в своем дизайне. В вашем случае вам потребуется не менее 5 строк (Username, Password и co, Title/First/Last name, email, Language). В противном случае ваш проблемный .col-sm-12 все еще находится в той же строке, что и выше 3 .col-sm-4, что приводит к полному количеству столбцов, превышающим 12, и вызывает проблему перекрытия.

Вот фиксированная демонстрация .

И выдержка из того, что должен выглядеть HTML-код проблемы:

<fieldset>
    <legend>Personal Information</legend>
    <div class='row'>
        <div class='col-sm-4'>    
            <div class='form-group'>
                <label for="user_title">Title</label>
                <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_firstname">First name</label>
                <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_lastname">Last name</label>
                <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-sm-12'>
            <div class='form-group'>

                <label for="user_email">Email</label>
                <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
</fieldset>

Ответ 2

Я не согласен с тем, что .form-group должна находиться внутри .col - * - n элементов. По моему опыту, все соответствующие дополнения выполняются автоматически, когда вы используете .form-группу типа .row внутри формы.

<div class="form-group">
    <div class="col-sm-12">
        <label for="user_login">Username</label>
        <input class="form-control" id="user_login" name="user[login]" required="true" size="30" type="text" />
    </div>
</div>

Просмотрите демо.

Немного изменив демонстрацию путем добавления .form-horizontal к тегу формы, измените часть этого дополнения.

<form action="#" method="post" class="form-horizontal">

Просмотрите демонстрацию .

Если вы сомневаетесь, проверьте в Chrome или используйте Firebug в Firefox, чтобы выяснить, что такое дополнение и поля. Использование .row внутри формы выходит из строя в edsioufi fiddle, потому что .row использует отрицательные левые и правые поля, тем самым вытягивая горизонтальные границы разделяемых div.row за пределы содержащихся полей.