在ASP.NET Core项目中实现卡片横向排列的技术咨询

Hey there! The issue here is that you're using Bootstrap's card-columns class, which is built for a vertical masonry-style layout—that's exactly why your cards are stacking vertically instead of sitting side-by-side. Let's fix this using Bootstrap's grid system (since you're already using Bootstrap card classes, this is the most seamless approach).

Step-by-Step Fix: #

• Wrap your card loop in a Bootstrap row container: This acts as a horizontal flex container for your cards.
• Replace card-columns with a grid column class: Use Bootstrap's col-* classes to control how many cards appear per row (adjust based on your desired layout).
• Add spacing: Use gap or margin utility classes to add consistent spacing between cards.

Modified Code: #

<div class="row g-4"> <!-- g-4 adds uniform gap between all cards -->
    @foreach (var item in Model) {
        <div class="col-md-4"> <!-- Shows 3 cards per row on medium+ screens -->
            <div class="card border-warning" style="width: 100%;"> <!-- Fill column width for consistent sizing -->
                <div class="card-body">
                    <strong>@Html.DisplayNameFor(model => model.EquipmentName) : </strong>
                    <p>@Html.DisplayFor(modelItem => item.EquipmentName)</p>
                    
                    <strong>@Html.DisplayNameFor(model => model.EquipmentSetValueTemp) : </strong>
                    <p>@Html.DisplayFor(modelItem => item.EquipmentSetValueTemp)</p>
                    
                    <strong>@Html.DisplayNameFor(model => model.EquipmentProcessValueTemp) : </strong>
                    <p>@Html.DisplayFor(modelItem => item.EquipmentProcessValueTemp)</p>
                    
                    <a asp-action="Details" asp-route-id="@item.EquipmentId" class="btn btn-primary">Details</a>
                    <a asp-action="Delete" asp-route-id="@item.EquipmentId" class="btn btn-danger">Delete</a> <!-- UX tweak for destructive action -->
                </div>
            </div>
        </div>
    }
</div>

Key Changes Explained: #

• row g-4: The row class enables flexbox layout, while g-4 adds clean, consistent spacing between cards without extra margin hacks.
• col-md-4: On screens larger than 768px (medium), each card takes 1/3 of the row width (3 cards per row). On smaller screens, cards stack vertically. Adjust this to col-sm-6 for 2 cards per row on small screens, or col-lg-3 for 4 cards per row on large screens.
• width: 100% on the card: Ensures the card fills its column container, so all cards have matching widths.
• btn-danger for Delete: A small UX improvement to make destructive actions visually distinct from primary actions like Details.

Alternative: Native Flexbox (No Bootstrap Grid) #

If you prefer not to use Bootstrap's grid system, you can use native CSS flexbox directly:

<div style="display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem;">
    @foreach (var item in Model) {
        <div class="card border-warning" style="flex: 0 0 30%; min-width: 18rem;"> <!-- 3 cards per row, minimum width 18rem -->
            <!-- Card content remains identical to your original code -->
        </div>
    }
</div>

This uses flex-wrap: wrap to push cards to the next row when space runs out, and flex: 0 0 30% sets each card to take up 30% of the container width (tweak this percentage to change the number of cards per row).

内容的提问来源于stack exchange，提问作者Akshay Patil