将复选框与标签内联答案

【问题标题】：Place checkbox inline with label将复选框与标签内联
【发布时间】：2014-08-16 13:36:07
【问题描述】：

引导文档和 SO 答案似乎并没有为我回答这个问题。我想在它的标签旁边放一个复选框。这很简单。我一定是做错了什么，但我想不通。

我正在使用：

#gemfile.lock, in my Rails application.

bootstrap-sass (3.1.1.1)
rails (4.0.3)

在我的 Rails 视图中：

# devise/registrations/new.html.erb
  <%= f.label :accept_terms, class: "checkbox" do %>
    <%= f.check_box :accept_terms %> I agree to the terms and conditions listed here
  <% end %>

生成以下 HTML：

  <label class="checkbox" for="user_accept_terms">
    <input name="user[accept_terms]" type="hidden" value="0"><input id="user_accept_terms" name="user[accept_terms]" type="checkbox" value="1"> I agree to the terms and conditions listed here
  </label>

或者，在视图中：

# devise/registrations/new.html.erb
  <%= f.label :accept_terms, "I agree to the terms and conditions listed here", class: "checkbox" %>
  <%= f.check_box :accept_terms %>

生成 HTML：

  <label class="checkbox" for="user_accept_terms">I agree to the terms and conditions listed here</label>
  <input name="user[accept_terms]" type="hidden" value="0"><input id="user_accept_terms" name="user[accept_terms]" type="checkbox" value="1">

这两种尝试都会导致复选框和标签出现在不同的行上。

我什至尝试过手动覆盖块显示属性（成功，根据 Chome 的检查）：

#user_accept_terms { display: inline;}
label.checkbox { display: inline; }

我怎样才能让这些元素表现出来？

提前谢谢你。

【问题讨论】：

标签： css ruby-on-rails forms twitter-bootstrap

【解决方案1】：

你能修改下面的例子吗？

<div class="checkbox">
    <label>
        <input type="checkbox"> Remember me
    </label>
</div>

我不确定如何让 rails 为您生成那种类型的代码，但这似乎是引导文档推荐的方式...Docs

【讨论】：

我已经尝试过了，将 div 和复选框以及文本放在标签括号内。 Rails 提供了更多细节，我无法抑制，但基本上它看起来就像你输入的那样。
听起来你肯定有一些其他的 CSS 可能有冲突，我用标准引导模板尝试了那个 HTML，它对我来说并排显示...

【解决方案2】：

只需删除块do...end

 <fieldset>
  <%= f.label :accept_terms, class: "checkbox"  %>
   <%= f.check_box :accept_terms %>
  </fieldset>

【讨论】：

我最初尝试过。结果相同。我已经更新了我的问题以显示该代码的外观。
什么类的形式？看起来像引导程序覆盖你css
没有特殊的表单类。只是试图复制引导基本示例：getbootstrap.com/css/#forms
如果你写在fieldset之外会发生什么？
看起来一样。我刚刚测试了两种方式，并更新了我的问题以清楚起见。