您如何在引导程序 4 中正确断点卡片组 [重复]

Question

我见过几个类似的问题，但似乎都没有解决生成的卡片。我的目标是每行有 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>

目前它将所有卡片放在一行中，而且每张卡片本身都非常薄。我必须添加什么才能让它分成多行固定大小？ 感谢您的帮助！

Answer 1

您可以使用 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>