将Twitter引导样式添加到Rails表单助手

Question

在阅读了建议我使用Simple_form gem和bootstrap集成的答案之后，我安装了它并根据simple_form指令创建了我的表单，但输入框是右对齐的。

这是布局。窗体被称为与局部的共享/ REG'

<div class="container"> 

    <div class="row"> 
    <div class="span8"><%= yield %></div> 
    <div class="span4"> 
    <%= render 'shared/reg' %> 
    </div> 

    </div> 
</div> 

这是我简单的表格形式

<%= 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 %> 

下面你可以看到输入框相权浮出提交按钮。

更新

Answer 1

你应该尝试以下操作：

<%= 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> 

注意引导使用一些特定的选择对于某些类/ html元素，因此，如果您忘记了添加一个元素或一个类，其他的一切都会搞砸......在这方面没有余地。

在附注中，您应该尝试simple_form和bootstrap集成。它会让你的生活更轻松。

更新：

<%= 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 %> 

Answer 2

而不是使用.form-actions类，它包装在灰色块中的提交按钮（这可能不是你的页面设计工作），你也可以换一个控制按钮组这样的：

<div class="control-group"> 
    <div class="controls"> 
     <%= f.button :submit %> 
    </div> 
    </div> 

，如果您使用的形式本身的.form-horizontal类这只真正需要的。

如果你正在寻找一个简易替换表单生成输出引导式标记为Rails，你可能想看看，我放在一起处理这种事情的瑰宝：

https://github.com/potenza/bootstrap_form

这里是你如何设置倒是与提交按钮水平式的形式正确一字排开：

<%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }) do |f| %> 
    <%= f.text_field :email %> 
    <%= f.password_field :password %> 
    <%= f.password_field :password_confirmation, label: 'Confirm Password' %> 
    <%= f.control_group do %> 
    <%= f.primary "Save User" %> 
    <% end %> 
<% end %> 

这是示例输出：

<form accept-charset="UTF-8" action="/users" class="form-horizontal" id="new_user" method="post"> 
    <div class="control-group"> 
    <label class="control-label" for="user_email">Email</label> 
    <div class="controls"> 
     <input id="user_email" name="user[email]" size="30" type="text" /> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="user_password">Password</label> 
    <div class="controls"> 
     <input id="user_password" name="user[password]" size="30" type="password" /> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="user_password_confirmation">Confirm Password</label> 
    <div class="controls"> 
     <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> 
    </div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
     <input class="btn btn-primary" name="commit" type="submit" value="Save User" /> 
    </div> 
    </div> 
</form>