html - 通过 Bootstrap 将动态 6 个图像插入 2 行

Question

我试着在 2 行中插入 6 张图像，但运气不好，问题是第 2 行打破了最后 2 个图像并将它们向下推。

我正在使用 Umbraco 和 bootstrap 3。

这是我的代码

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "InnerPage.cshtml";
}
@section slider 
{
    @{Html.RenderPartial("ImageSlider");}
}

@{ 

<!-- PROGRAM PAGE -->
<script src="js/script.js"></script>
<div class="caption-button caption-gray left-top" style="font-size:14px;">UPCOMING EVENTS</div>
<div class="padding-top-60">
    <div class="row row-lg-height">
        <div id="eventCarousel" class="carousel slide vertical" >
            <div class="carousel-inner">

@{

    var content = Umbraco.Content(1122);

    int itemsCount = content.Children.Count();
    int sliders = itemsCount / 6;

    for (int i = 0; i <= sliders; i++)
    {
        var items = content.Children;

        if (i == 0)
        {
            @Html.Raw("<div class=\"item active\">")
            items = content.Children.Take(6);
        }
        else
        {
            items = content.Children.Skip(i * 6).Take(6);
            @Html.Raw("<div class=\"item\">")
        }

        foreach (var childContent in items)
        {
            var contentService = ApplicationContext.Current.Services.ContentService.GetById(int.Parse(childContent.Id.ToString()));
            var title = childContent.Name.ToString();
            var image = Umbraco.Media(contentService.Properties["Thumbnail"].Value.ToString());
            var description = contentService.Properties["shortDescription"].Value.ToString();

            var img = image.Url.ToString();
            <div class="col-lg-4">
                <img src="@image.Url" class="media-object pull-left img-responsive" />
                        <h1 class="media-heading" style="color:#606060;">@title</h1>
                <div style="padding:0px 5px; ">@MvcHtmlString.Create(@description)</div>
            </div>
        }
        @Html.Raw("</div>")
    }
}

            </div>
        </div>
    </div>
</div>
<a class="caption-button caption-red right-bottom" href="#eventCarousel" data-slide="next">MORE</a>
}

我附上了 2 张图片，这样您就可以看到 Firebug 向我展示了什么以及屏幕上发生了什么。

请帮助我!我的脑袋已经坏了 2 天了，这在浪费我的时间..

我做错了什么？？

Answer 1

我觉得你的代码有点难。如果您使用其他方法，您将能够更轻松地进行调试。

试试这样的方法:

@{
  var allNodesToLoop = Umbraco.Content(1122).Children;
}

@foreach(var nodegroup in allNodesToLoop.InGroupsOf(2) {
  <div class="row">
     @foreach(var item in nodegroup) {
       <div class="col-md-4">
         @item.Name
         <!-- and other stuff you want to render in this grid cell -->
       </div>
     }
  </div>
}