Question

在我的Razor视图中，我有以下代码来布局页面。但是根据媒体查询，我想更改numberOfColumns的值。因此当MD我使用2时和SM时我使用1 - 即。根据媒体查询更改我输出的列数。这可能吗？

如果没有其他方法可以做到这一点？

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")
}

Answer 1

感谢@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 ----------------------------------------------------------------------------------------------------------*@

使用Twitter Bootstrap媒体查询设置Razor视图变量

1 个答案: