通过bootstrap将动态6个图像插入2行

Question

我试着没有运气将6张图片插入2行， 问题是第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张图片，这样你就可以看到萤火虫向我展示了什么以及屏幕上发生了什么。

请帮助我！我已经伤了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>
}