ruby - 带有 Bootstrap 复选框的 simple_form

Question

我将 simple_form 与 Bootstrap 一起使用，我希望将“记住我”复选框内嵌在标签的左侧，如 Twitter Bootstrap 文档中所示：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 %>

结果是复选框顶部的“记住我”标签。

我搞砸了什么？

Answer 1

有许多选项，请参阅此处了解更多选项：

最直接的（我认为）是在您的复选框上使用:label => falseand: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?

Answer 3

我认为这个更简单一点：

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