我想创建一个动态div。
我有一个产品列表,其中最多3个可以在一行“col-xs-4”但如果它们是4个产品我想要3个用“col-xs-4”而第4个用“col-xs-4” -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>
先谢谢
答案 0 :(得分: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>