twitter-bootstrap simple_form with Bootstrap 复选框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13656819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:50:06  来源:igfitidea点击:

simple_form with Bootstrap check box

rubytwitter-bootstraperbsimple-form

提问by hamsterdam

I'm using simple_form with Bootstrap and I would like to have my "Remember me" check box be inline to the left of the label, as in the Twitter Bootstrap docs: http://twitter.github.com/bootstrap/base-css.html#forms

我正在将 simple_form 与 Bootstrap 一起使用,并且我希望将我的“记住我”复选框内联到标签的左侧,如 Twitter Bootstrap 文档中所示:http: //twitter.github.com/bootstrap/base- css.html#forms

My form code looks like this:

我的表单代码如下所示:

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

The result is the the "Remember me" label on top of a check box.

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

What have I messed up?

我搞砸了什么?

回答by alol

There's a number of options for this, see herefor more of them:

对此有多种选择,更多选择请参见此处

The most straightforward (I think) is to use :label => falseand :inline_label => true, on your checkbox, to change the where in the HTML the label is placed.

最直接的(我认为)是在复选框上使用:label => falseand:inline_label => true来更改标签在 HTML 中的位置。

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

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

This produces something like this for me:

这对我来说是这样的:

enter image description here

在此处输入图片说明

回答by Josh M.

@alol's answer works great for a vertical form (labels on top of the fields), but if you're doing a horizontal form and you want the check box labels to show to the right of the checkbox, but still keep with the layout of the form, you can do this:

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

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

You can also pass a specific label to use as the inline label instead of true, if you need to:

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

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

回答by Pablo Olmos de Aguilera C.

I think this one is a bit simpler:

我觉得这个更简单一点:

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

The wrapper comes bundled in config/initializers/simple_form_bootstrap.rbat least from simple_form 3.1.0rc2when installed with:

包装器config/initializers/simple_form_bootstrap.rb至少从simple_form 3.1.0rc2安装时开始捆绑:

rails g simple_form:install --bootstrap