Колода карт Bootstrap 4.3 не устанавливает количество столбцов

Question

Я использую Bootstrap 4.3 и пользовательский импорт Bootstrap SCSS. Я пытаюсь настроить Bootstrap card-deck для моей пользовательской темы. Но он не устанавливает $card-columns-count правильно (см. Скриншот). Это должно установить это к 3 колонкам?

Я не могу понять, что не так? Я проверил все и не могу найти неправильную разметку или отсутствующий код или что-то.

Это моя разметка:

<div class="js-view-dom-id-782ad9c1f67057f3ddbbae335925382482f61ffa0bbdb300906427454d9c43d7 card-deck">

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="views-field views-field-title">
        <span class="field-content">
          <!-- THEME DEBUG -->
          <!-- THEME HOOK: 'views_view_field' -->
          <!-- BEGIN OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
            Base Jump Kasteel
          <!-- END OUTPUT from 'core/themes/stable/templates/views/views-view-field.html.twig' -->
        </span>
      </div>
    </div>
  </div>

</div>

Answer 1

Необходимо переопределить несколько CSS, так как я переопределяю, смотрите ниже фрагмент вашего решения ...

@media (min-width: 576px){
  .card-deck {
    justify-content: space-between;
  }
  .card-deck .card {
    flex: 32% 0 0;
    margin: 0 0 15px 0;
  }
}

JSFiddle