Bootstrap 4.3 card-deck 不设置列数答案

【问题标题】：Bootstrap 4.3 card-deck doesn't set the column countBootstrap 4.3 card-deck 不设置列数
【发布时间】：2019-07-09 17:13:04
【问题描述】：

我使用 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>

【问题讨论】：

标签： css sass bootstrap-4

【解决方案1】：

需要覆盖一些 CSS，因为我覆盖参考下面的 sn-p 为您的解决方案...

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

JSFiddle

【讨论】：

但是为什么需要额外的代码呢？ Bootstrap 4.3 card-deck 默认情况下应该将列分为 3 列不是吗？由$card-columns-count`变量提供。