Question

我使用bootstrap 4.1卡在右侧栏中显示类别-Card example image;

在小屏幕上，我想折叠此card，因为它很大并且排在第一位-mobile example。

那么我该如何在sm和md屏幕上折叠卡片，而不在lg屏幕上折叠卡片？还是我不需要使用card？

<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。我将导航栏样式用于折叠图标，您可能需要对其进行调整以使其与导航栏相匹配。

Answer 2

您可以这样设置：

<div class="card">
   <div class="card-header">
     <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
        card header
     </a>
   </div>
   <div id="test-block" class="collapse">
    <div class="card-block">
        card block
    </div>
  </div>
</div>

将执行您要尝试执行的操作。

Answer 3

仅可以使用内置的Bootstrap类隐藏在较小的屏幕上。 https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

看起来像这样（未经测试）

<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 d-none d-lg-block">
  <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>

它所做的只是检查屏幕宽度上的媒体查询，如果屏幕尺寸小于您设置的阈值，则应用display:none。

在sm和/或md屏幕上折叠引导卡

3 个答案: