如何使用 foreach 循环在同一行中显示 3 个引导卡标题答案

【问题标题】：How to display 3 Bootstrap Card titles in same row using foreach loop如何使用 foreach 循环在同一行中显示 3 个引导卡标题
【发布时间】：2019-06-24 20:20:23
【问题描述】：

我有视图需要在同一行中显示 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>
 }

【问题讨论】：

标签： c# twitter-bootstrap razor

【解决方案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>
    }
}

【讨论】：