Question

Bootstrap文档和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的Inspect成功完成）：

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

如何让这些元素表现出来？

提前谢谢。

Answer 1

只需删除块do...end

即可

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

Answer 2

您可以修改以下示例吗？

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

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

将复选框与标签内联

2 个答案: