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

Posted 2021-04-08

我想使用bootstrap将视图中填充的数据分成不同的列。现在正在发生的事情，第二次预告中的所有结果都显示在第一个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>

答案

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

<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％的列。