创建动态div Razor MVC

我有一个产品列表，最多3个可以在一行“col-xs-4”，但如果他们是4个产品，我想要3个“col-xs-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>

由于提前

来源

2017-08-14 Samuel Silva

引导电网系统文件就是这样 - > https：//v4-alpha.getbootstrap.c om/layout/grid/ –

是的，但这并不能解决我的问题。 –

<div class="[email protected](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="[email protected](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>

来源

2017-08-14 08:06:35

创建动态div Razor MVC

回答

相关问题