創建動態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

回答

相關問題