devise編集フォームとブートストラップ

Question

私の編集画面では、ブートストラップを適用したいと思います。 ...

<div class="row"> 
    <div class="col-md-4"> 
    <div class="form-group"> 
     <label class="sr-only" for="username">Username</label> 
     <input type="text" class="form-control" name="username" placeholder="Username" value="<%= f.text_field :username %>"> 
     </div> 
    </div> 
</div> 

をこれで...

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> 
    <%= devise_error_messages! %> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div class="row form-group"> 
      <div class="col-md-4"><%= f.label :username %></div> 
      <div class="col-md-8"><%= f.text_field :username %></div> 
     </div> 

を交換する場合しかし、私はERBを含めるように多くの選択肢を試してみましたが、理解していない出力

としてこれを取得します問題。フィールドを編集フォームにどのように含める必要がありますか？

Answer 1

あなたはすべてのものをレールで行うことができます。あなたが使用したい場合は、このリンク

http://apidock.com/rails/ActionView/Helpers/FormHelper/text_field

をご覧ください詳細について

<div class="row"> 
    <div class="col-md-4"> 
    <div class="form-group"> 
     <%= f.label :username %> 
     <%= f.text_field :username, class: "form-control", placeholder: "Username" %> 
     </div> 
    </div> 
</div> 

アドオンあなた以下のように

<div class='input-group' > 
      <%= f.text_field :username, class: "form-control", placeholder: "Username" %> 
      <span class="input-group-addon" id="basic-addon2">@example.com</span> 
</div> 

Answer 2

が、この代わりに

<div class="row"> 
    <div class="col-md-4"> 
    <div class="form-group"> 
     <label class="sr-only" for="username">Username</label> 
     <%= f.text_field :username, class: "form-control", placeholder: "Username" %> 
     </div> 
    </div> 
</div> 

を試すことができます

Answer 3

私はsimple_formと呼ばれる宝石を使うことを提案します。それはDeviseの作者によって作られ、Bootstrapでうまく動作します。また、良い検証エラーがあります。

https://github.com/plataformatec/simple_form

ここでは例です：

= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| 
     .form-inputs 
     = f.input :email, required: false, autofocus: true, placeholder: 'Email' 
     = f.input :password, required: false, placeholder: 'Password' 
     = f.input :remember_me, as: :boolean, label: 'Remember Me' if devise_mapping.rememberable? 
     .form-actions 
     = f.button :submit, 'Sign in', class: 'btn-block btn-success' 
     %br 
     = link_to 'Forgot your password?', new_user_password_path 

上記のコードは、自動的にすべてのブートストラップ・クラスおよびラベルを追加します...など