Question

我在我的网站上使用Bootstrap 3并且我使用MVC Razor For Each Loop来检索博客主页上的所有子项目，如下所示：

@{int i = 0;}
@foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending"))
{
    if (i % 2 == 0)
    {
        @:<div class="row row-eq-height">
    }

    <div class="col-sm-12 col-md-6">
    </div><!-- col-sm-12 col-md-6 -->

    if (i % 2 != 0)
    {
        @:</div><!-- row row-eq-height -->
    }
    i++;
}

当我有一个偶数个子页面时，这很好用，但是当我有一个奇数个子页面时，它没有击中if％2！= 0块，这意味着最后一行没有＆＃39; t关闭然后打破页面其余部分的流程。

我尝试通过在For Each循环之后添加以下if语句来解决此问题，希望如果i的最终值不是2，则会根据需要添加关闭DIV标记，但这会导致不平衡的DIV标记错误。

@if (i !% 2 == 0)
{
    </div><!-- row row-eq-height -->
}

任何人有任何想法或想法？如果我有一个偶数，它就可以正常工作，页面流程也符合预期。

Answer 1

你的foreach循环需要在包含元素（行）内，然后使用循环，关闭并为每个第二个子元素（列）开始一个新行

@{int i = 0;}
<div class="row row-eq-height">
    @foreach (var subPage in Model.Content.AncestorOrSelf(2).Children.OrderBy("createDate descending"))
    {
        if (i > 0 && i % 2 == 0)
        {
            @:</div><div class="row row-eq-height">
        }
        <div class="col-sm-12 col-md-6">xxxxx</div>
        i++;
    } 
</div>

假设集合中有5个项目，输出将为

<div class="row row-eq-height">
    <div class="col-sm-12 col-md-6">xxxxx</div>
    <div class="col-sm-12 col-md-6">xxxxx</div>
</div>
<div class="row row-eq-height">
    <div class="col-sm-12 col-md-6">xxxxx</div>
    <div class="col-sm-12 col-md-6">xxxxx</div>
</div>
<div class="row row-eq-height">
    <div class="col-sm-12 col-md-6">xxxxx</div>
</div>

不平衡DIV关闭DIV与每个循环的MVC剃刀

1 个答案: