html - 简单表单复选框左对齐

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