如何解决如果扩展屏幕尺寸,则在水平卡片中显示更多内容以及滚动条
我想显示一个包含更多列的水平卡片。如果超过 col-12 大小,其余内容也需要显示在卡片中并启用滚动条。
我的 HTML 代码:
@input() helloMessage:string;
在我的代码中,所有内容都水平显示,但 content > col-12 未显示在卡片内。我想实现所有内容都需要显示在卡片内,如果超过屏幕尺寸,卡片内的剩余内容需要与水平滚动条一起显示。
解决方法
将 overflow-auto
类添加到 <div class="card">
。像这样:
<div class="card overflow-auto">
片段:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="card overflow-auto">
<div class="card-body">
<div class="row flex-nowrap">
<div class="col-2">
Name
</div>
<div class="col-2">
Id
</div>
<div class="col-2">
Dept
</div>
<div class="col-2">
Section
</div>
<div class="col-2">
Class
</div>
<div class="col-2">
Roll No
</div>
<div class="col-2">
Subjects
</div>
<div class="col-2">
Mark
</div>
<div class="col-2">
Total
</div>
<div class="col-2">
Grade
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。