自举复选框simple_form(simple_form with Bootstrap check

2019-08-03 10:04发布

我使用simple_form与引导,我想有我“记住我”复选框是内嵌在标签的左侧,作为Twitter的引导文档: 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 => "&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?


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


文章来源: simple_form with Bootstrap check box