Rails Bootstrap как отформатировать form_for (ширина сетки рушится)

Question

Я пытаюсь сделать форму с помощью bootstrap-sass. Мне нужно найти оптимальную конфигурацию классов начальной загрузки, чтобы она выглядела красиво. Он не отображается так, как я ожидаю, особенно когда ширина браузера меньше определенного размера, промежутки между метками и полями формы сжимаются, и это больше не выглядит хорошо. Было бы хорошо, если бы это происходило только на небольшой ширине, но это не так. Я был бы очень признателен за помощь в этом, действительно, что является лучшим способом отформатировать form-horizontal с начальной загрузкой?

Вот мой код:

<form class="form-horizontal center" role="form">
<%= form_for @user do |f| %>
  <div class="field">
    <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
    <%= f.text_field :fname %>
  </div>
  <div class="field">
    <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
    <%= f.text_field :lname %>
  </div>
  <div class="field">
    <%= f.label :email, "Email:", class: "col-md-4 control-label" %>
    <%= f.text_field :email %>
  </div>
  <!--div class="form-group" -->
  <div class="field">
    <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
    <%= f.text_field :comments %>
  </div>
  <div class="field">
    <%= f.radio_button :attend, 'yes', :checked => true, class: "col-md-4 control-label" %>
    <%= f.label :attend, 'I will attend.', :value => "yes" %><br />
    <%= f.radio_button :attend, 'no', :checked => false, class: "col-md-4 control-label" %>
    <%= f.label :attend, "I will not attend.", :value => "no" %>
  </div>
  <div class="field">
    <%= f.check_box :workshop, class: "col-md-4 control-label" %>
    <%= f.label :workshop, "Checkbox Description" %>
  </div>
  <div class="field">
    <div class="col-md-4">
    <%= f.submit "Submit", class: "btn btn-default btn-primary" %>
    </div>
  </div>
<% end %>
</form>

Как видно из закомментированного кода, я впервые использовал form-group класс, но это не сработало. Опять же, проблема заключается в том, что пробелы между метками и текстовыми полями разрушаются, когда ширина браузера меньше определенного размера. Ярлыки, которые выровнены по правому краю, теряют свое выравнивание. Браузер должен быть почти полноэкранным, чтобы отображаться правильно, что не правильно, потому что есть достаточно места для его правильного отображения на меньшей ширине. Я следовал этому руководству http://getbootstrap.com/css/

Изменить: Добавлено поле электронной почты в коде, потому что оно имеет другой размер и легче увидеть проблему.

Answer 1

Вы должны взглянуть на http://getbootstrap.com/css/, и вам не нужно добавлять form tag так как вы уже используете form_for

 <%= form_for @user, :html => {:class => "form-horizontal center"} do |f| %>
      <div class="form-group">
        <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :fname, class: "form-control" %>
        </div>
      </div>
      <div class="form-group">
        <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
        <div class="col-md-8">
          <%= f.text_field :lname, class: "form-control" %>
        </div>
      </div>

      <div class="form-group">
        <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
        <div class="col-md-8>
          <%= f.text_field :comments, class: "form-control" %>
        </div>
      </div>
      <div class="radio">
        <%= f.radio_button :attend, 'yes', :checked => true %> I will attend.
        <br />
        <%= f.radio_button :attend, 'no', :checked => false %> I will not attend.
      </div>
      <div class="checkbox">
        <%= f.check_box :workshop %> Checkbox Description
      </div>

      <%= f.submit "Submit", class: "btn btn-default btn-primary" %>  
 <% end %>