css - Bootstrap 4 - 小屏幕卡溢出
问题描述
在我的应用程序中,我使用了很多 bootcard .card 类。
只是,当我切换到移动视图时,我经常注意到一个很大的溢出,这导致了一个显示错误,并且我的整个页面都被移动了。
这意味着我每次都必须更改 .card 类中的代码,以确保一切都适合移动视图。很奇怪
在大屏幕上:
在小屏幕上:
这是代码:
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<div class="float-right">
<button class="btn btn-light btn-sm mb-1">Ne pas résilier l'abonnement</button>
</div>
</h5>
<div class="card-body">
<table class="table table-borderless">
<thead>
<tr>
<th>PRODUIT</th>
<th>PROCHAINE FACTURE</th>
<th>CRÉÉ LE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<br>
<p class="text-secondary">
basic
</p>
</td>
<td>
Pas de prochaine facture
</td>
<td>
03/04/2020
</td>
</tr>
</tbody>
</table>
</div>
</div>
谢谢你的帮助 !
解决方案
如果可能的话,用列替换表格。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="card mt-4">
<h5 class="card-header">
Abonnement
<button class="btn btn-light btn-sm mb-1 float-sm-right">Ne pas résilier l'abonnement</button>
</h5>
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-4">
<h5>PRODUIT</h5>
TETETE
<span class="badge badge-secondary">Annulation prévue 03/05/2020</span>
<p class="text-secondary">
basic
</p>
</div>
<div class="col-12 col-sm-4">
<h5>PROCHAINE FACTURE</h5>
<p class="text-secondary">
Pas de prochaine facture
</p>
</div>
<div class="col-12 col-sm-4">
<h5>CRÉÉ LE</h5>
<p class="text-secondary">
03/04/2020
</p>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- c# - 试图检查用户是否存在于我的数据库中
- html - 带有复选框和标签的纯css卡片翻转,无法点击卡片面上的标签链接
- mysql - MySQL INNER JOIN 返回重复结果
- python - 使用来自另一个程序的参数运行 python 程序
- openmesh - 添加元素时是否更改了 OpenMesh 迭代器?
- regex - 正则表达式匹配字符串 3-6 个字符长,至少一个字母,不能重复“-”
- java - 用于实现 Firebase 授权的 Java 帮助
- scheme - 当用户按 Enter 时,Scheme 中的 Scheme REPL 不呈现提示
- python - 在 Python 3.8 中,如何绑定 RecycleView 数据
- node.js - 如何在带有 sqlite 数据库的 nodejs 上使用 passport.js