带有Bootstrap的simple_form复选框

Question

我正在使用带有Bootstrap的simple_form,我希望我的"记住我"复选框位于标签的左侧,如Twitter Bootstrap文档中所示:http://twitter.github.com/bootstrap/base- css.html#形式

我的表单代码如下所示:

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

结果是复选框顶部的"记住我"标签.

我搞砸了什么？

Answer 1

有很多选项,请参阅此处了解更多信息:

最简单的(我认为)是使用:label => false和:inline_label => true,在您的复选框上,更改标签所在的HTML中的位置.

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

这为我产生了这样的东西:

Answer 2

@ alol的答案适用于垂直表单(字段顶部的标签),但如果你正在做一个水平表单,并且你希望复选框标签显示在复选框的右侧,但仍然保持布局表格,你可以这样做:

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

您还可以传递特定标签以用作内联标签,而不是true,如果您需要:

f.input :remember_me, :as => :boolean, :label => " ", :inline_label => "My Label" if devise_mapping.rememberable?