- 首页
- 其他开发
- 将 Twitter 引导样式添加到 Rails 表单助手
将 Twitter 引导样式添加到 Rails 表单助手
[英] Adding Twitter bootstrap styling to Rails form helpers
本文介绍了将 Twitter 引导样式添加到 Rails 表单助手的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在阅读了建议我使用 Simple_form gem 和 bootstrap 集成的答案后，我安装了它并根据 simple_form 说明创建了我的表单，但输入框向右浮动.
这是布局.正在使用部分shared/reg"调用表单
<div class="row"><div class="span8"><%= yield %></div><div class="span4"><%= 渲染 'shared/reg' %>
这是我的简单表单
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f|％＞<%= f.input :name %><%= f.input :vote, :collection =>[支持"、反对"、未定"] %><%= f.input :country, :collection =>[加拿大"、冰岛"、其他"]%><%= f.input :email %><%= f.input :image, :as =>:文件%><%= f.input :password %><%= f.input :password_confirmation %><%= f.button :submit %><%结束%>
下面您可以看到输入框如何相对于提交按钮浮动.
更新
解决方案
您应该尝试以下操作:
<%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f|％＞<字段集><legend>用户注册</legend><div class="control-group"><%= f.label :name, class: "control-label" %><div class="控件"><%= f.text_field :name %></p>
<div class="form-actions"><%= f.submit %>
</fieldset>
注意bootstrap对一些classes/html元素使用了一些特定的选择器，这样如果你忘记添加一个元素或一个class，其他的一切都会一团糟......在这方面没有余地.
顺便提一下，您绝对应该尝试 simple_form 和引导程序集成.它会让您的生活更轻松.
更新:
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f|％＞<字段集><legend>用户注册</legend><%= f.input :name %><%= f.input :vote, :collection =>[支持"、反对"、未定"] %><%= f.input :country, :collection =>[加拿大"、冰岛"、其他"]%><%= f.input :email %><%= f.input :image, :as =>:文件%><%= f.input :password %><%= f.input :password_confirmation %><div class="form-actions"><%= f.submit %>
</fieldset><%结束%>
After reading the answer which suggested I use Simple_form gem with bootstrap integration, I installed it and created my form according to simple_form instructions, but the input boxes are floating right.
This is the layout. The form is being called with the partial 'shared/reg'
<div class="container">
<div class="row">
<div class="span8"><%= yield %></div>
<div class="span4">
<%= render 'shared/reg' %>
</div>
</div>
</div>
This is my simple form form
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
<%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %>
<%= f.input :email %>
<%= f.input :image, :as => :file %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.button :submit %>
<% end %>
Below you can see how the input boxes are floating right in relation to the submit button.
Update
解决方案
You should try the following:
<%= form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
<legend>User Registration</legend>
<div class="control-group">
<%= f.label :name, class: "control-label" %>
<div class="controls">
<%= f.text_field :name %></p>
</div>
</div>
<div class="form-actions">
<%= f.submit %>
</div>
</fieldset>
Note that the bootstrap uses some specific selectors for some classes / html elements, so that if you forget to add an element or a class, everything else will be messed up... In this aspect there's no leeway.
On a side note, you should definitely try simple_form, and the bootstrap integration. It will make your life easier.
Update:
<%= simple_form_for("user", :url => main_app.user_registration_path, :html => { :class => "form-horizontal" } ) do |f| %>
<fieldset>
<legend>User Registration</legend>
<%= f.input :name %>
<%= f.input :vote, :collection => [ "For", "Against", "Undecided"] %>
<%= f.input :country, :collection => [ "Canada", "Iceland", "Other"] %>
<%= f.input :email %>
<%= f.input :image, :as => :file %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<div class="form-actions">
<%= f.submit %>
</div>
</fieldset>
<% end %>
这篇关于将 Twitter 引导样式添加到 Rails 表单助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
