Rails Bootstrap如何格式化form_for(宽度网格折叠)

Question

我正在尝试用bootstrap-sass创建一个表单.我需要找到引导类的最佳配置,使其看起来不错.它没有按照我期望的方式显示,特别是当浏览器宽度小于特定大小时,标签和表单字段之间的空格会崩溃,并且它看起来不再好看.如果它只发生在小宽度上就可以了,但事实并非如此.我真的很感激这方面的一些帮助,真的,form-horizontal用bootstrap 格式化的最佳方法是什么？

这是我的代码:

<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/#grid

编辑:在代码中添加了电子邮件字段,因为它的大小不同,更容易看到问题.

Answer 1

你应该看看http://getbootstrap.com/css/#forms-horizo​​ntal ,你不需要添加,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 %>