如何在bootstrap 4中正确地对卡片组进行断点
如何在bootstrap 4中正确地对卡片组进行断点
提问于 2021-03-27 04:52:57
我看到过几个类似的问题，但似乎没有一个是针对生成的卡的。我的目标是每行有4张或更少的卡片，高度/宽度固定。下面是我目前拥有的代码：
<div class="container">
<div class="card-deck">
@foreach (var item in Model)
{
<div class="card shadow">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="@item.TrainingId">@Html.DisplayFor(modelItem => item.Title)</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
@Convert.ToDateTime(item.DateCreated).ToString("MM/dd/yy")
</div>
@Html.DisplayFor(modelItem => item.Description)
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
@Html.DisplayFor(modelItem => item.Topic.Topic)
</div>
</div>
</div>
}
</div>
</div>目前，它将所有的卡片放在一行，而且每张卡片本身都非常薄。我必须添加什么才能让它分成固定大小的多行？谢谢你的帮助！
回答 1
Stack Overflow用户
发布于 2021-03-27 17:53:08
您可以使用Bootstrap的网格系统和row-cols-1 row-cols-md-2来定义每个断点处一行中有多少张卡。所有的牌的高度都是一样的。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">First Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/21/21
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 7 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Second Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/22/21
</div>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 6 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Third Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/24/21
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 5 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Fourth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/25/21
</div>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 4 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Fifth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/26/21
</div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 3 days ago
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card shadow h-100">
<div class="card-title pl-4 pr-4 pt-3">
<h4><a class="stretched-link deco-none font-weight-bold" asp-controller="Home" asp-action="TrainingDetails" asp-route-id="TrainingRoute">Sixth Title</a></h4>
</div>
<div class="card-body overflow pl-4 pr-4 pb-2">
<div class="font-weight-bold text-secondary">
03/27/21
</div>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
<div class="card-footer">
<div class="text-center text-muted training-footer">
Last updated 2 days ago
</div>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66824166
复制相关文章
相似问题
腾讯云开发者
