简单表单复选框左对齐

Question

我有一个表单简单的 rails 4 应用程序。

应用中有一个复选框元素，该框位于标签的左侧。

<div class="row">
  <div class="col-md-3 col-md-offset-1">
    <%= f.label  :'How will you share the project results?', :class => 'question-project' %>
  </div>
  <div class="col-md-7">
    <div class= "response-project">
      <%= f.input :report,  as: :boolean, inline_label: 'A report on project outcomes', label: false, :item_wrapper_class => 'inline' %>
      <%= f.input :other_outcome, :as => :boolean, :label => false, :inline_label => true %>
    </div>
  </div>
</div>

response-project 的 css 是：

.response-project {
  font-weight: normal;
  font-family: 'Roboto', sans-serif;
  color: light-grey;
  font-size: 16px;
  line-height: 2;

}

复选框比所有其余表单元素更靠左对齐。这似乎来自简单的形式。有谁知道如何关闭该对齐，以便复选框与表单的左侧对齐，与表单的所有其他元素保持一致？

谢谢

Answer 1

这里有一个非常相似的 Stack 帖子：simple_form with Bootstrap check box

您需要做的是在 config/initializers/simple_form.rb 中创建一个自定义包装器。在此处阅读更多信息https://github.com/plataformatec/simple_form/wiki/Custom-Wrappers

Answer 2

根据bootstrap，你需要把checkbox的样式和class设置成这样

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>

Answer 3

将:item_wrapper_class => 'inline' 添加到您的代码中。