问题描述
我想显示一个包含更多列的水平卡片。如果超过 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>