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

Bootstrap 4.3卡座未设置列数

1 个答案: