javascript - 折叠 sm 和/或 md 屏幕上的 Bootstrap 卡

Question

我使用 bootstrap 4.1 卡在右侧边栏上显示内部类别 - Card example image ;

在小屏幕上，我想折叠这张卡片，因为它很大并且先出现 - mobile example .

那么如何才能在 sm 和 md 屏幕上折叠卡片，而不在 lg 屏幕上折叠卡片呢？或者我不需要使用卡？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="card mb-3">
    <h5 class="card-header">Categories</h5>
    <div class="card-body">
      <h5><a href="http://rtss2.loc/info">All</a></h5>
      Categories here
    </div>
  </div>
</div>

Answer 1

<button class="btn d-lg-none" type="button" data-toggle="collapse" data-target="#example-collapse">
    <span class="navbar-light"><span class="navbar-toggler-icon"></span></span>
</button>

<div id="example-collapse" class="collapse d-lg-block">
    <!-- your card here -->
</div>

类d-lg-none隐藏了lg和xl屏幕尺寸的按钮，类d-lg- block 显示 lg 和 xl 屏幕尺寸的 div。我正在使用 navbar-light 样式的折叠图标，您可能需要调整它以匹配您的导航栏。