Rails Bootstrap如何格式化form_for（width grid collapses） [英] Rails Bootstrap how to format form_for (width grid collapses)

问题描述

我试图用bootstrap-sass创建一个表单。我需要找到引导类的最佳配置，使它看起来不错。它不显示我的期望的方式，特别是当浏览器的宽度小于一定的大小，标签和表单字段之间的空格折叠，它看起来不再好。这将是确定，如果它只发生在小宽度，但事实并非如此。
我真的很感谢一些帮助，
真的，什么是格式化 form-horizo​​ntal 与bootstrap的最好的方法？

I'm trying to make a form with bootstrap-sass. I need to find the optimal configuration of bootstrap classes to make it look nice. It is not showing up the way I expect, specifically when the browser width is smaller than a certain size the spaces between labels and form fields collapse and it doesn't look good anymore. It would be ok if it only happens on small width, but that's not the case. I would really appreciate some help with this, really, what is the best way to format the form-horizontal with 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

As you can see from commented out code, I first used form-group class, but it wasn't working well. Again, the problem is that spaces between labels and text fields collapse when width of the browser is less than certain size. The labels, which are right-aligned, lose their alignment. Browser has to be almost full screen to show up correctly, which isn't right because there's plenty of space for it to show up correctly on smaller width. I was following this guide http://getbootstrap.com/css/#grid

编辑：代码中添加了电子邮件字段，因为大小不同，更容易看到问题。

Edit: Added email field in the code, because it's of different size and easier to see the problem.

推荐答案

您应该查看 http：// getbootstrap。 / css /＃forms-horizo​​ntal
，因为您已经在使用，所以不需要添加表单标记 form_for

you should take a look at http://getbootstrap.com/css/#forms-horizontal and you don't need to add form tag since you are already using 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 %>

这篇关于Rails Bootstrap如何格式化form_for（width grid collapses）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！