使用单独的 foreach 在一行中显示两个 div

Question

我想使用引导程序将视图中填充的数据分成不同的列。现在发生了什么，第二个foreach中的所有结果都显示在第一个foreach中的所有结果下。我想...

在第一个 foreach 显示第 1 列中的所有结果。

第二个 foreach 显示第 2 列中的所有结果。

<div class="container">
<div class="row">
@foreach (var winner in Model.AwardWinners.Where(x => x.Type == 1))
{
<div class="col-xs-12 col-sm-6 col-md-6 d-block">
<div class="colourbar"></div>
<div class="awardWinnersBox">
<div class="top-info">
<div class="soloAuthorPhoto">
<img src="" alt="" onerror="this.src = '/images/noProfilePhoto.png'" />
</div>
<div class="authordetails">
<div class="soloAuthorHeading"></div>
<div class="soloAuthorName"></div>
</div>

<div class="verticalDivide"></div>
<div class="award">
<img src="/images/AwardWinners/thought-leader-logo.png" alt="" class="typeImage" />
<div class="awardName">
@winner.AwardName
</div>
</div>
</div>
<div class="title"><a href="">test</a></div>
<div class="eventTimeDetails">@(winner.Contact ?? "")</div>
<span class="bottomLine"></span>
<div class="firmMask">
<img src="" onerror="this.src='/images/lex-linkedin.png'" />
</div>
</div>
</div>
}
@foreach (var winner in Model.AwardWinners.Where(x => x.Type == 2))
{
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="colourbar"></div>
<div class="awardWinnersBox">
<div class="top-info">
<div class="soloAuthorPhoto">
<img src="" alt="" onerror="this.src = '/images/noProfilePhoto.png'" />
</div>
<div class="authordetails">
<div class="soloAuthorHeading"></div>
<div class="soloAuthorName"></div>
</div>

<div class="verticalDivide"></div>
<div class="award">
<img src="/images/AwardWinners/Legal-influencer-logo.png" alt="" />
<div class="awardName">
@winner.AwardName 
</div>
</div>
</div>
<div class="title"><a href="">test</a></div>
<div class="eventTimeDetails">@(winner.Contact ?? "")</div>
<span class="bottomLine"></span>
<div class="firmMask">
</div>
</div>
</div>
}
</div>
</div>

Answer 1

我会先添加列，然后添加内容：

<div class="container">
<!--Column 1-->
<div class="col-6">
<!-- For each 1 -->
</div>
<!--Column 2-->
<div class="col-6">
<!-- For each 2 -->
</div>
</div>

请记住，您必须将布局应用于 2 列，内容块应占据 100% 的列。