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

Question

我想使用 bootstrap 将视图中填充的数据分成不同的列。现在发生了什么，第二个 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% 的列。

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

Displaying two divs in one row using seperate foreach

css

c#

foreach

styles

display