如何使用foreach循环在同一行中显示3个Bootstrap Card标题

Question

我有一个视图，需要在同一行中显示3个卡牌。但目前它显示一个接一个。如何在同一行中显示3张卡牌？

Index.cshtml-

@model List<JobPortal.Models.MyDB>
@{
   ViewBag.Title = "Current List";
}

<div class="row">
 @foreach (var list in Model)
 {

       <div class="flexcontainer">
          @Html.Partial("_MySharedView", list)
       </div>

}
</div>

共享视图-

@model JobPortal.Models.MyDB
@if (Model.JDetails.Count > 0)
{

    <div class="card" style="width: 18rem;">
       <img class="card-img-top" src="..." alt="Card image cap">
      <div class="card-body">
      <p class="card-text">Model.details</p>
     </div>
  </div>
 }

Answer 1

您可以在部分视图中执行以下操作：

@if(Model.JDetails.Count > 0)
    foreach (var item in Model.JDetails)
    {
        <div class="col-sm">
          <div class="card">
              <img class="card-img-top" src="..." alt="Card image cap">
               <div class="card-body">
                  <p class="card-text">@item.details</p>
               </div>
          </div>
       </div>
    }
}