时间戳

首页 > 解决方案 > 如何在rails简单形式的字段集中创建div

html - 如何在rails简单形式的字段集中创建div

问题描述

我得到了带有相关复选框的简单表格。我需要使用 twitter bootstrap 类“col-md-4”来设置复选框的样式，它将复选框呈现在 3 列中。但它需要父元素上的“行”类，即字段集。当我将该类分配给字段集时，它不起作用。但是如果我在浏览器开发工具中将父元素更改为 div，它会很好用。有什么办法可以在字段集中创建另一个 div，这将是我所有复选框 div 的父元素？或任何其他方式来解决我的问题？

_form.slim
=simple_form_for @test_run do |f|
  =f.error_notification
  =f.association :test_cases, as: :check_boxes, collection: ::TestCase.all, include_hidden: false, :item_wrapper_class => 'col-md-4'
  =f.input :video, as: :radio_buttons, label: 'Record video?'
  =f.submit


html
<fieldset class="form-group check_boxes required test_run_test_cases">
  <legend class="col-form-label pt-0">Test cases <abbr title="required">*</abbr></legend>
  <div class="col-md-4">checkbox</div>
  <div class="col-md-4">checkbox</div>
  .
  .
  .
</fieldset>

我需要这样的东西

<fieldset class="form-group check_boxes required test_run_test_cases">
  <div class="row">
    <legend class="col-form-label pt-0">Test cases <abbr title="required">*</abbr></legend>
    <div class="col-md-4">checkbox</div>
    <div class="col-md-4">checkbox</div>
    .
    .
    .
  </div>
</fieldset>

标签： htmlruby-on-railssimple-form

解决方案

对我来说，最快的解决方案是实际更改默认包装标签：

# config/initializers/simple_form.rb
config.collection_wrapper_tag = :div

这将在复选框或单选按钮周围创建一个 div。然后，您可以通过collection_wrapper_class在简单表单输入中使用为该 div 分配一个类。对于您的情况，它将是

=f.input :video, as: :radio_buttons, label: 'Record video?', collection_wrapper_class: 'some-class'

推荐阅读