javascript - 在 sm 和\或 md 屏幕上折叠引导卡
问题描述
我使用 bootstrap 4.1 卡片在右侧边栏显示内部类别 -卡片示例图像;
在小屏幕上,我想折叠它card
,因为它很大并且首先是移动示例。
那么如何在屏幕上折叠卡片,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>
解决方案
<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
显示了 divlg
和xl
屏幕尺寸。我正在使用折叠图标的navbar-light
样式,您可能需要调整它以匹配您的导航栏。