使用Twitter Bootstrap媒體查詢設置Razor視圖變量

在我的Razor視圖中，我有以下代碼來佈置頁面。但是基於媒體查詢，我想更改numberOfColumns的值。所以，當MD我使用2，當SM我使用1 - 即。根據媒體查詢更改輸出的列數。這可能嗎？使用Twitter Bootstrap媒體查詢設置Razor視圖變量

如果不是有另一種方法來做到這一點？

bool inRow = false; 
int numberOfColumns = 3; //<---- Change based on media query 
int columnNumber = 0; 
foreach (OzCpCruiseListItem cruiseItem in Model.CruisesBrief) 
{ 
    columnNumber++; 
    if (columnNumber == 1) 
    { 
     inRow = true; 
    } 

    if (inRow && columnNumber == 1) 
    { 
     @Html.Raw("<!-- START Row --><br />") 
     @Html.Raw("<div class=\"row\">") 
    } 

    <div class="col-lg-4 col-md-6 col-sm-12"> //<--- 3 col for large, 2 for medium, 1 small 
    </div> 

    if (columnNumber == numberOfColumns) 
    { 
     inRow = false; 
     @Html.Raw("</div>") 
     @Html.Raw("<!-- END Row --><br />") 
     columnNumber = 0; 
    } 
} 

//Close row if needed 
if (inRow) 
{ 
    @Html.Raw("<!-- END AT END Row --><br />") 
    @Html.Raw("</div") 
}

來源

2017-02-13 TheEdge

你的問題沒有意義。您已經通過選擇正確的'col- *'類來選擇列的數量。 – DavidG

@DavidG是的，但基於我的循環，無論視圖端口大小，我總是總是輸出3列。隨着視圖端口大小的變化，我需要將其更改爲1或2列。那麼這是否意味着我必須爲每個媒體查詢輸出3次數據？ – TheEdge

不，只是循環你的收藏，並把它們放在你有的div。 – DavidG

感謝@DavidG，他試圖理解我在做什麼。以下是我想要解決的問題。換句話說：「我不希望行中的列在特定的媒體查詢中包裝到下一行。」

我能想出這樣做是爲了輸出每個媒體查詢的一些HTML和基於列的數目改變類（列）我期待的唯一方式通過：

result += $"<div class=\"col-{aMediaValue.ToLower()}-{columnSize}\">";

如果有一個更好的方法我希望聽到它，因爲我不喜歡這樣一個事實，即我爲相同的數據輸出4個HTML批次 - 每個媒體查詢需要1個HTML。

@functions { 
    HtmlString CardViewOutput(string aMediaValue) 
    { 
     string result = ""; 
     int columnCount; 

     switch (aMediaValue.Trim().ToUpper()) 
     { 
      case "LG": 
       columnCount = 3; 
       break; 
      case "MD": 
       columnCount = 2; 
       break; 
      case "SM": 
      case "XS": 
       columnCount = 1; 
       break; 
      default: 
       columnCount = 1; 
       break; 
     } 
     int columnSize = 12/columnCount; 


     bool inRow = false; 
     int columnNumber = 0; 
     foreach (OzCpCruiseListItem cruiseItem in Model.CruisesBrief) 
     { 
      columnNumber++; 
      if (columnNumber == 1) 
      { 
       inRow = true; 
      } 

      if (inRow && columnNumber == 1) 
      { 
       result += "<!-- START Row --><br />"; 
       result += "<div class=\"row\">"; 
      } 

      result += $"<div class=\"col-{aMediaValue.ToLower()}-{columnSize}\">"; 
      result += "</div>"; 


      if (columnNumber == columnCount) 
      { 
       inRow = false; 
       result += "</div>"; 
       result += "<!-- END Row --><br />"; 
       columnNumber = 0; 
      } 
     } 

     //Close row if needed 
     if (inRow) 
     { 
      result += "<!-- END AT END Row --><br />"; 
      result += "</div>"; 
     } 

     return new HtmlString(result); 
    } 
} 

@*-- Card View -----------------------------------------------------------------------------------------------------------*@ 
@if (Model.CruisesBrief.Count == 0) 
{ 
    @Html.Raw("<div class=\"row\"><div class=\"col-lg-12 col-md-12 col-sm-12 col-xs-12\">No cruises to display.</div></div>") 
} 
else 
{ 
    @Html.Raw("<div class=\"visible-lg\">") 
    @Html.Raw("LARGE") 
    @Html.Raw(CardViewOutput("LG")) 
    @Html.Raw("</div>") 
    @Html.Raw("<div class=\"visible-md\">") 
    @Html.Raw("MEDIUM") 
    @Html.Raw(CardViewOutput("MD")) 
    @Html.Raw("</div>") 
    @Html.Raw("<div class=\"visible-sm\">") 
    @Html.Raw("SMALL") 
    @Html.Raw(CardViewOutput("SM")) 
    @Html.Raw("</div>") 
    @Html.Raw("<div class=\"visible-xs\">") 
    @Html.Raw("EXTRA SMALL") 
    @Html.Raw(CardViewOutput("XS")) 
    @Html.Raw("</div>") 
} 
@*-- /Card View ----------------------------------------------------------------------------------------------------------*@

來源

2017-02-13 02:36:44 TheEdge

使用Twitter Bootstrap媒體查詢設置Razor視圖變量

回答

相關問題