CSS Rails Bootstrap 如何格式化 form_for（宽度网格折叠）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21710486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails Bootstrap how to format form_for (width grid collapses)
提问by Chemist
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-horizontalwith bootstrap?
我正在尝试使用 bootstrap-sass 制作表单。我需要找到引导类的最佳配置以使其看起来不错。它没有按我预期的方式显示，特别是当浏览器宽度小于特定大小时，标签和表单字段之间的空间会塌陷，看起来不再好看。如果它只发生在小宽度上就可以了，但事实并非如此。我真的很感激这方面的一些帮助，真的，form-horizontal用引导程序格式化的最佳方法是什么？
Here's my code:
这是我的代码：
<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>
As you can see from commented out code, I first used form-groupclass, 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
从注释掉的代码中可以看出，我首先使用了form-group类，但效果不佳。同样，问题是当浏览器的宽度小于特定大小时，标签和文本字段之间的空间会塌陷。右对齐的标签失去对齐。浏览器必须几乎全屏才能正确显示，这是不正确的，因为它有足够的空间在较小的宽度上正确显示。我正在遵循本指南http://getbootstrap.com/css/#grid
Edit: Added email field in the code, because it's of different size and easier to see the problem.
编辑：在代码中添加了电子邮件字段，因为它的大小不同并且更容易看到问题。
回答by Rahul Singh
take a look at bootstrap v3 doc here http://getbootstrap.com/css/#forms-horizontaland you don't need to add form tagsince you are already using form_for
在此处查看引导程序 v3 文档http://getbootstrap.com/css/#forms-horizontal并且您不需要添加，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 %>
