Исправление сниппета от Bootstrap 3 до Bootstrap 4
Я использовал этот фрагмент в своем приложении Rails + Sass + Bootstrap. https://bootsnipp.com/snippets/featured/multi-select-tiled-layout
Первоначально он вообще не работал из-за несовместимости с bootstrap v.4, поэтому я смог немного реорганизовать и заставить некоторые элементы работать.
Единственное, что не работает должным образом, - это скрытие флажка. Мне пришлось перейти с глификонов на fontawesome, потому что bootstrap 4 больше не поддерживает глификоны. Структура в основном такая же, поэтому я не знаю, чего здесь не хватает.
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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я смог исправить свои флажки. Я столкнулся с некоторыми проблемами с data-toggle и помощниками формы рельсов, но я также смог обойти это
Вот мой код на случай, если кто-то столкнется с теми же проблемами.
Во-первых, я хотел бы сказать, что bootstrap на самом деле предоставляет все функции, которые я искал. Так что мне даже не пришлось использовать фрагмент, который я получил по опубликованной мной ссылке.
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Итак, для проблемы, с которой я столкнулся с помощниками форм рельсов и переключением данных. Я решил, построив поля флажков из простого html и используя индекс из each_with_index в качестве необходимой переменной.
Если вы добавите скрытое поле, это не сработает. Я оставил скрытое поле с комментариями, чтобы проиллюстрировать, что я пытался :)
Не используйте псевдонимы "EDIT" в своих сообщениях. Это старая форумная привычка, которая здесь не применима.