css - 在Bootstrap中将8张相同大小的卡片放在一行中
问题描述
我真的对 Bootstrap 中的列系统感到困惑。这是我所拥有的:
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Cards</h1>
</div>
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
由于间距,我总共有 8 张牌,其中 2 张在第二行。我怎样才能用我的卡片获得专业的观点?我需要显示我们拥有的机器的 12 种不同状态,启动、停止和运行。
这是jsFiddle的链接: https ://jsfiddle.net/rbk27ote/1/
解决方案
您只需要为您想要使相等的所有 div 元素放置类“col”。如下所示:-
<div class="col"></div>
推荐阅读
- java - 无法从 GAE 的 java 邮件 APi 发送邮件
- git - 我可以在提交到 git 之前进行分支吗?
- python - 手动运行 sendgrid 脚本,但在 crontab 下运行时失败
- python-3.x - Nginx + uWSGI + django NoModuleFoundError: No module named 'saleor'
- ubuntu - 在 ubuntu 上为 gtkmm 和 gtk+ 配置 eclipse
- c# - 将字符串转换为 Aspose.Cells.Name
- virtualbox - 无法启动 VM - Minikube
- unity3d - 将纬度和经度转换为球体上的 3d 坐标是否准确?
- mysql - 如何将数据从数据转储(SqLite3)导入 django?
- xml - PowerShell 操作 XML - 向 XML 对象添加任意数据