Исправление фрагмента Bootstrap 3 to Bootstrap 4 - PullRequest
Новая
       20

Исправление фрагмента Bootstrap 3 to Bootstrap 4

0 голосов
/ 04 января 2019

Я использовал этот фрагмент в своем приложении 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>

1 Ответ

0 голосов
/ 05 января 2019

Я смог исправить свои флажки. Я столкнулся с некоторыми проблемами с 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 в качестве необходимой переменной.

Если вы добавите скрытое поле, оно не будет работать. Я оставил там скрытое поле с комментариями, чтобы проиллюстрировать, что я пытался :)

...