У меня есть представление о продуктах, и я хочу, чтобы они отображались горизонтально, но они отображаются вертикально.
Как они отображаются:
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>