Bootstrap 3 到 Bootstrap 4 片段更正

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 表单助手的一些问题，但我也能够解决这个问题

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

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

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 form helpers 和 data-togle 时遇到的问题。我通过从纯 html 构建复选框字段并使用来自 each_with_index 的索引作为所需变量来解决。

如果您添加隐藏字段，它将不起作用。我把隐藏的字段留在那里评论来说明我试过了:)