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>

响应项目的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，你需要将复选框样式和类布局为类似这样的

<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'添加到您的代码中。

简单表单复选框左对齐

3 个答案: