Как отобразить 3 заголовка Bootstrap Card в одном ряду, используя цикл foreach

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>
    }
}