html - 如何对齐网格系统html/css?
问题描述
我正在用 Angular 编写应用程序。我希望卡片按顺序显示。现在,当卡片的数量少于整行时,卡片向右移动,看起来很糟糕。我该如何解决?
html文件:
<div class="box">
<div class="row" style="padding-top: 3%; max-width: 2800px;">
<div *ngFor="let order of orders" class="col mb-5">
<div class="card text-center bg-white rounded shadow-sm">
<div class="card-body">
<h5 class="card-title">{{orderStatuses[order.status]}}</h5>
<p class="card-text small text-muted">{{order._id}}</p>
<p class="card-text">Kwota: {{order.sum}} zł</p>
<div class="buttons box px-3 py-2 mt-4">
<button type="button" class="btn additional effect
[routerLink]="order._id">
<strong>Sprawdź</strong>
</button>
</div>
</div>
</div>
</div>
</div>
CSS 文件:
.box {
display: flex;
justify-content: space-around;
}
.card {
max-width: 325px;
}
解决方案
推荐阅读
- node.js - 为什么我通过 App Engine 部署的应用无法连接到 Cloud SQL postgres 数据库?
- camera - 有没有办法使用手机摄像头捕捉高光谱图像?
- vba - vba清除某个范围或单元格的内容
- c# - 如何在不阻塞 WPF 中的 UI 线程的情况下执行 InitializeComponent?
- python - 如何在pygame的模拟器中为正方形添加重力?---python2.7
- javascript - 检查日期文本在momentjs中是否有毫秒和秒
- c - 在 C 中访问对象的字节
- javascript - 在 JavaScript 中更新对象的多个值
- python - 使用神经网络了解函数是线性的还是非线性的
- javascript - 当我输入并提交名称和 img url 时,它不会在其他页面上显示