css - 创建动态 div Razor MVC

Question

我想创建一个动态 div。

我有一个产品列表，最多 3 个产品可以排成一行“col-xs-4”，但如果它们是 4 个产品，我想要 3 个带有“col-xs-4”，第 4 个带有“col-xs” -12"填充整行。如果我有 5 个产品，我想要 3 个带有“col-xs-4”，另外 2 个带有“col-xs-6”。

我在考虑根据我设置类的元素的数量

<div class="flippersContainer">
<div class="container">
    <div class="col-xs-12">
        @{
            var children = Model.Content.Children.ToList();
            if (children.Any())
            {
                foreach (var item in children.OfType<RedButtonItem1>())
                {
                    string imagePath = string.Empty;
                    if (!string.IsNullOrEmpty(item.Image))
                    {
                        var itemImage = Umbraco.TypedMedia(item.Image);
                        imagePath = itemImage.GetCropUrl(80, 160);
                    }
                    {
                        string colCSS = string.Empty;
                        var productNumber = children.OfType<RedButtonItem1>().Count();
                    }

                    <div class="col-xs-4">
                        <div class="front-two">
                            <div class="flipperAllFront">
                                <div class="big-button">
                                    <img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
                                    <div class="productTitle">
                                        <span>@item.Title</span>
                                    </div>

                                    <div class="productText">
                                        <span>@item.Description</span>
                                    </div>
                                    @{
                                        if (item.CallToAction != null && item.CallToAction.HasValues)
                                        {
                                            var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
                                            var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;

                                            @:<a role="button" href="@linkUrl" target="@linkTarget">
                                    }
                                        else
                                        {
                                            @:<a class="link-big-button" role="button" data-parent="#accordion" href="#@item.Id">
                                        }
                                        @:</a>
                                    }
                            </div>
                        </div>
                    </div>
                </div>
                                            }
                                        }
        }
    </div>
</div>

提前致谢

Answer 1

  <div class="col-xs-@(childrenCount==3?"4":childrenCount==4?"3":childrenCount==5?"3":"6")">

---

 <div class="flippersContainer">
        <div class="container">
            <div class="col-xs-12">
                @{
                    var children = Model.Content.Children.ToList();
                    int childrenCount = children.OfType<RedButtonItem1>().Count;
                    if (children.Any())
                    {
                        foreach (var item in children.OfType<RedButtonItem1>())
                        {
                            string imagePath = string.Empty;
                            if (!string.IsNullOrEmpty(item.Image))
                            {
                                var itemImage = Umbraco.TypedMedia(item.Image);
                                imagePath = itemImage.GetCropUrl(80, 160);
                            }
                            {
                                string colCSS = string.Empty;
                                var productNumber = children.OfType<RedButtonItem1>().Count();
                            }

                            <div class="col-xs-@(childrenCount==3?"4":childrenCount==4?"3":childrenCount==5?"3":"6")">
                                <div class="front-two">
                                    <div class="flipperAllFront">
                                        <div class="big-button">
                                            <img class="img-responsive" src="https://www.atlantico.ao/SiteCollectionImages/PARTICULARES/ContaGlobal/Atlantico-Conta-Global-375X178.jpg">
                                            <div class="productTitle">
                                                <span>@item.Title</span>
                                            </div>

                                            <div class="productText">
                                                <span>@item.Description</span>
                                            </div>
                                            @{
                                                if (item.CallToAction != null && item.CallToAction.HasValues)
                                                {
                                                    var linkUrl = (item.CallToAction.First.Value<bool>("isInternal")) ? (item.CallToAction.First.Value<int?>("internal").HasValue ? Umbraco.NiceUrl(item.CallToAction.First.Value<int>("internal")) : string.Empty) : item.CallToAction.First.Value<string>("link");
                                                    var linkTarget = item.CallToAction.First.Value<bool>("newWindow") ? "_blank" : null;

                                                    @:<a role="button" href="@linkUrl" target="@linkTarget">
                                        }
                                                else
                                                {
                                                    @:<a class="link-big-button" role="button" data-parent="#accordion" href="#@item.Id">
                                            }
                                                @:
                                            </a>
                                            }
                                    </div>
                                </div>
                            </div>
                        </div>
                                                    }
                                                }
                }
            </div>
        </div>