將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>