Css Rails引导如何格式化表单(宽度网格折叠)
我正试着用引导式sass做一个表格。我需要找到引导类的最佳配置,使其看起来更漂亮。它并没有像我期望的那样显示出来,特别是当浏览器宽度小于某个特定的大小时,标签和表单字段之间的空间会崩溃,看起来不再好。如果它只发生在小宽度上就可以了,但事实并非如此。 我真的很感激你能帮我, 真的,用引导设置Css Rails引导如何格式化表单(宽度网格折叠),css,ruby-on-rails,twitter-bootstrap,form-for,bootstrap-sass,Css,Ruby On Rails,Twitter Bootstrap,Form For,Bootstrap Sass,我正试着用引导式sass做一个表格。我需要找到引导类的最佳配置,使其看起来更漂亮。它并没有像我期望的那样显示出来,特别是当浏览器宽度小于某个特定的大小时,标签和表单字段之间的空间会崩溃,看起来不再好。如果它只发生在小宽度上就可以了,但事实并非如此。 我真的很感激你能帮我, 真的,用引导设置表单水平格式的最佳方法是什么 这是我的密码: <form class="form-horizontal center" role="form"> <%= form_for @user do |
表单水平格式的最佳方法是什么
这是我的密码:
<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>
正确,类别:“col-md-4控制标签”%>
“是”%>
false,类别:“col-md-4控制标签”%>
“否”%>
正如您从注释掉的代码中所看到的,我首先使用了表单组
类,但它工作得不好。
同样,问题是当浏览器的宽度小于一定的大小时,标签和文本字段之间的空格会塌陷。右对齐的标签将失去对齐。浏览器必须几乎全屏才能正确显示,这是不对的,因为它有足够的空间在较小的宽度上正确显示。
我是按照这个指南做的
编辑:在代码中添加了电子邮件字段,因为它的大小不同,并且更容易看到问题。在这里查看bootstrap v3文档
而且您不需要添加form标签
,因为您已经在使用form\u 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 %>
{:class=>“形成水平中心”}do | f |%>
真的%>我会参加。
false%>我不会出席。
复选框说明
不,它不工作。前两个字段恰好在字母方面大小相同。使用另一个字段,更容易看到格式的分解。(我将编辑主题以包含另一个不同大小的字段)阅读后,如果你减小浏览器宽度,它似乎开始水平折叠…这就是你的案例发生的情况…我是对的。?是的,你是对的!因此,只需将其更改为xs
而不是md
即可使其工作得更好!这太棒了,我现在对表单的唯一问题是出现了水平滚动条(没有任何原因)。顺便说一下,form_for tag中的类:“form horizontal center”
没有添加css类,它必须这样编写才能工作::html=>{:class=>“form horizontal center”}
,如果您使用不同的“col”大小在同一类中,您可以根据屏幕大小设置不同的宽度。例如,“col-xs-2 col-md-4”类将宽度设置为2(如果它=768像素)。请参阅引导网格文档: