Question

我将此代码段用于Rails + Sass + Bootstrap应用程序。 https://bootsnipp.com/snippets/featured/multi-select-tiled-layout

最初与Bootstrap v.4不兼容，因此它根本无法正常工作，因此我能够进行一些重构，并使某些元素可以正常工作。

唯一无法正常工作的是隐藏该复选框。我必须从glyficons更改为fontawesome，因为bootstrap 4不再支持glyficons。结构基本相同，所以我不知道这里缺少什么。

HTML

.button-container{margin:20px 0 0 0}
label.btn-default.active{background-color:#007ba7; color:#FFF}
label.btn-default{width:100%; border:1px solid #efefef; margin:5px; box-shadow:5px 8px 8px 0 #ccc;}
label .bizcontent{width:100%;}
.btn-group{width:90%;}
.btn i.fa{
    opacity: 0;
}
.btn.active i.fa {
    opacity: 1;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

<div class='items col-lg-6'>
  <div class='info-block block-info clearfix'>
    <div class='btn-group bizmoduleselect' data-toggle='buttons'>
      <label class='btn btn-default'>
       <div class='bizcontent'>
         <input autocomplete='off' name='var_id[]' type='checkbox' value=''>
         <i class='fa fa-check'></i>
         <h5>Coffee</h5>
        </div>
      </label>
    </div>
  </div>
</div>

Answer 1

我能够修复我的复选框。我遇到了data-toggle和Rails表单助手的一些问题，但是我也能够解决该问题

这是我的代码，以防有人遇到相同的问题。

首先，我想说的是，引导程序实际上提供了我正在寻找的所有功能。因此，我什至不需要使用从我发布的链接中获得的摘录。

label.btn-default.active{
  background-color:#007ba7; 
  color:#FFF
  }

label.btn-default{
  width:100%; 
  border:1px solid #efefef; 
  margin:5px; 
  box-shadow:5px 8px 8px 0 #ccc; 
  background-color:rgba(0, 0, 0, 0.03);}

.btn-group{width:90%;}
.btn i.fa{
    opacity: 0;
}

.btn.active i.fa {
    opacity: 1;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.checkboxless{
  display: none;
}

- @questions.each_with_index do |question, i|
  = f.simple_fields_for :my_answers do |b|
    = b.input :question_id, input_html: { value: question.id }, as: :hidden
    .btn-group{"data-toggle" => "buttons"}
      %label.btn.btn-default
        -# %input{name: "my_quiz[my_answers_attributes][#{i}][answer]",  type: "hidden",  value:"0"}
        %input{class: "boolean optional checkboxless", autocomplete: "off", type: "checkbox", value: "1", name: "my_quiz[my_answers_attributes][#{i}][answer]", id: "my_quiz_my_answers_attributes_#{i}_answer"}
        %i.fa.fa-check.pull-left
        %h5
          = question.title

所以对于我遇到的有关Rails表单帮助程序和数据转换的问题。我通过从纯HTML中构建复选框字段并使用each_with_index中的索引作为所需变量来解决问题。

如果您添加了隐藏字段，它将无法正常工作。我在此处留下了隐藏字段，以说明我已经尝试过了:)

Bootstrap 3至Bootstrap 4代码段更正

1 个答案: