web-dev-qa-db-ja.com

Bootstrapチェックボックス付きのsimple_form

Bootstrapでsimple_formを使用していて、TwitterのBootstrapのドキュメントのように、「Remember me」チェックボックスをラベルの左側にインライン化したい： http： //Twitter.github.com/bootstrap/base-css.html#forms

私のフォームコードは次のようになります。

<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :class => 'well'}) do |f| %>
    <%= f.input :email %>
    <%= f.input :password %>
    <%= f.input :remember_me, :as => :boolean if devise_mapping.rememberable?  %>

    <%= f.button :submit, "Sign In" %>

<% end %>

その結果、チェックボックスの上に「Rememberme」というラベルが表示されます。

私は何を台無しにしましたか？

rubytwitter-bootstraperbsimple-form
23
hamsterdam

これにはいくつかのオプションがあります。それらの詳細については、 ここ を参照してください。

最も簡単な方法（私は思う）は、チェックボックスで:label => falseと:inline_label => trueを使用して、HTML内のラベルの配置場所を変更することです。

<%= f.input :remember_me, :as => :boolean, :label => false, :inline_label => true if devise_mapping.rememberable? %>

これは私にとってこのようなものを生み出します：

enter image description here

58
alol

@alolの回答は、垂直フォーム（フィールドの上のラベル）には最適ですが、水平フォームを実行していて、チェックボックスのラベルをチェックボックスの右側に表示したい場合は、次のレイアウトを維持します。フォームでは、これを行うことができます：

f.input :remember_me, :as => :boolean, :label => "&nbsp;", :inline_label => true if devise_mapping.rememberable?

必要に応じて、trueの代わりにインラインラベルとして使用する特定のラベルを渡すこともできます。

f.input :remember_me, :as => :boolean, :label => "&nbsp;", :inline_label => "My Label" if devise_mapping.rememberable?
5
Josh M.

これは少し簡単だと思います。

f.input :remember_me, wrapper: :vertical_boolean, as: :boolean  if devise_mapping.rememberable?

このラッパーは、以下と一緒にインストールした場合、少なくともconfig/initializers/simple_form_bootstrap.rbからsimple_form 3.1.0rc2にバンドルされています。

Rails g simple_form:install --bootstrap
2
Pablo Olmos de Aguilera C.