在 sm 和\或 md 屏幕上折叠引导卡
Posted
技术标签:
【中文标题】在 sm 和\\或 md 屏幕上折叠引导卡【英文标题】:Collapse bootstrap card on sm and\or md screens在 sm 和\或 md 屏幕上折叠引导卡 【发布时间】:2019-02-20 05:32:33 【问题描述】:我使用 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>
【问题讨论】:
【参考方案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
样式的折叠图标,您可能需要调整它以匹配您的导航栏。
【讨论】:
非常感谢!我无法添加 +1,因为我只有 9 声望。但我将您的答案标记为解决方案。 嗨,我也想这样做,但是对于小屏幕 (sm/xs) 但是当我执行 d-sm-block 时,它会将 sm 的显示设置为大于 sm 的所有屏幕。如何反转它?【参考方案2】:可以只使用内置的 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
。
【讨论】:
但我不想隐藏所有卡片。我想把它折叠起来。就像导航菜单一样——在小屏幕上它会折叠起来,需要按下三行按钮来显示菜单元素。 这个答案没有解决问题,但它是解决方案的另一半。【参考方案3】:你可以这样设置:
<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>
并且会做你想做的事。
【讨论】:
格栅!但是如何在sm
屏幕上自动折叠它而不在lg
上折叠?
这个答案没有解决问题,但它是解决方案的一半。以上是关于在 sm 和\或 md 屏幕上折叠引导卡的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap中col-xs-*和col-sm-* 和col-md-*是怎么样对应的