RailsフォームヘルパーにTwitterブートストラップスタイリングを追加する

Question

シンプルフォームの統合を使ってSimple_form gemを使用することを提案した答えを読んだ後、シンプルフォームの指示に従ってフォームを作成しインストールしました。

これはレイアウトです。フォームを使用すると、入力ボックスが右に関連して浮遊しているかを確認することができます下にこれは私の単純なフォームフォーム

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

ある

<div class="container"> 

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

    </div> 
</div> 

部分の共有/ REG 'で呼び出されています送信ボタン。

更新

Answer 1

あなたは次のことを試してみてください：あなたがするのを忘れるとなるように、ブートストラップは、いくつかのクラス/ HTML要素のためのいくつかの特定のセレクタを使用していることを

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

は注意要素やクラスを追加すると、他のすべてがうんざりになります...この側面では、余裕はありません。

さらに、simple_formとブートストラップの統合を試してください。それはあなたの人生を楽にします。

更新：は

<%= 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クラスを、使用するよりも、あなたはまた、コントロールのボタンをラップすることができますこのようなグループ：フォーム自体に.form-horizontalクラスを使用している場合にのみ、本当に必要とされている

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

。

あなたは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>