Благодаря @DavidG, который пытался понять, о чем я был. Ниже мое решение того, что я пытался просить. Иными словами: «Я никогда не хотел, чтобы столбцы в строке обертывались на следующую строку, когда в конкретном запросе на медиа».
Единственный способ, которым я могу придумать, чтобы сделать это, чтобы вывести некоторый HTML на медиа-запросы и изменять классы (для столбцов) на основе количества колонок я ожидаю через:
result += $"<div class=\"col-{aMediaValue.ToLower()}-{columnSize}\">";
Если есть лучший способ, который я хотел бы услышать, поскольку мне не нравится тот факт, что я выводил 4 лота HTML для тех же данных - 1 для каждого медиа-запроса.
@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 ----------------------------------------------------------------------------------------------------------*@
Ваш вопрос на самом деле не имеет смысла. Вы уже выбираете количество столбцов, выбирая правильные классы 'col- *'. – DavidG
@DavidG Да, но на основе моего цикла я в настоящее время всегда выставляю 3 столбца все время независимо от размера порта просмотра. По мере изменения размера порта просмотра мне нужно изменить его на 1 или 2 столбца. Значит ли это, что я должен выводить данные 3 раза по одному для каждого медиа-запроса? – TheEdge
Нет, просто обведите коллекцию и поместите их в свой div. – DavidG