Question

我有一个产品视图，我希望它们水平显示，但垂直显示。

显示方式：

x
x
x
x

我要如何显示它们：

x x x
x x x
x x x

我尝试了display：inline-block，但是没有用。

列表视图：

<body>
    <header></header>
    <main role="main">
        @await Html.PartialAsync("Carousel")
        <div class="container">
            <h2 class="text-center" style="color:#5095b7; font-style:oblique">@Model.CurrentCategory</h2>
            <div class="row">
                <div class="col-lg-2">
                    <div class="list-group">
                        @await Component.InvokeAsync("CategoryMenu")
                    </div>
                </div>
                <div class="col-lg-10">
                    @foreach (Product product in Model.Products)
                    {
                        @await Html.PartialAsync("ProductSummary", product)
                    }
                </div>
            </div>
        </div>
    </main>
</body>

ProductSummary部分视图：

@model Product
<div class="row">
    <div class="col-lg-4">
        <div class="card h-100">
            <a><img class="card-img-top" src="@Model.ImageThumbnailUrl" alt=""></a>
            <div class="card-body">
                <h4 class="card-title">
                    <a asp-controller="Product" asp-action="ProductDetails" asp-route-drinkId="@Model.ProductId">@Model.Name</a>
                    <a class="float-right">@Model.Price$</a>
                </h4>
                <p class="card-text">@Model.ShortDescription</p>
            </div>
            <div class="card-footer">
                <div class="add-to-Cart text-right">
                    <a class="btn btn-success" id="cartButton"
                       asp-controller="ShoppingCart"
                       asp-action="AddToShoppingCart"
                       asp-route-productId="@Model.ProductId">
                        Add to cart
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以在容器中使用flex布局，并在部分视图中删除class="row"用于商品。

列表视图：

<body>
<header></header>
<main role="main">
    @await Html.PartialAsync("Carousel")
    <div class="container">
        <h2 class="text-center" style="color:#5095b7; font-style:oblique">@Model.CurrentCategory</h2>
        <div class="row">
            <div class="col-lg-2">
                <div class="list-group">
                    @await Component.InvokeAsync("CategoryMenu")
                </div>
            </div>
            <div class="col-lg-10" style="display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;justify-content:space-between">
                @foreach (Product product in Model.Products)
                {
                    @await Html.PartialAsync("ProductSummary", product)
                }
            </div>
        </div>
    </div>
</main>

ProductSummary部分视图：

@model Product
@*<div class="row"> remove this line*@
<div class="col-lg-4">
    <div class="card h-100">
        <a><img class="card-img-top" src="@Model.ImageThumbnailUrl" alt=""></a>
        <div class="card-body">
            <h4 class="card-title">
                <a asp-controller="Product" asp-action="ProductDetails" asp-route-drinkId="@Model.ProductId">@Model.Name</a>
                <a class="float-right">@Model.Price$</a>
            </h4>
            <p class="card-text">@Model.ShortDescription</p>
        </div>
        <div class="card-footer">
            <div class="add-to-Cart text-right">
                <a class="btn btn-success" id="cartButton"
                   asp-controller="ShoppingCart"
                   asp-action="AddToShoppingCart"
                   asp-route-productId="@Model.ProductId">
                    Add to cart
                </a>
            </div>
        </div>
    </div>
</div>
@*</div>*@

如何水平显示项目

1 个答案: