Blazor中Bootstrap卡片无法横向排列，如何解决？

你的代码核心问题是把Bootstrap的row容器放在了foreach循环内部，导致每个房产卡片都被包裹在独立的行里，所以只能纵向堆叠。要实现横向排列，需要把row放在循环外部，让所有卡片的col都处于同一个行容器中。

修正后的代码 #

<!-- 将row容器移到foreach外面 -->
<div class="row row-cols-1 row-cols-md-2 g-4">
    @foreach (var item in APModel)
    {
        <div class="col">
            <div class="card" style="width: 18rem;">
                <img src="https://images.pexels.com/photos/2360673/pexels-photo-2360673.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="房产图片">
                <div class="card-body">
                    <h6 class="card-title">PropertyType: @item.PropertyType</h6>
                    <h6 class="card-title">PropertyStatus: @item.PropertyStatus</h6>
                    <h6 class="card-title">Price: @item.Price</h6>
                    <h6 class="card-title">Location: @item.Location</h6>
                    <h6 class="card-title">Rooms @item.TotalRooms</h6>
                    <h6 class="card-title">Baths @item.Bathrooms</h6>
                    <p class="card-text">@item.Description</p>
                    <button class="btn btn-outline-danger btn-sm"
                        @onclick="(()=>DeleteProperty(item.PropertyID))">
                        Del
                    </button>
                </div>
            </div>
        </div>
    }
</div>

关键说明 #

• Bootstrap的row是列的容器，所有需要横向排列的col必须放在同一个row内
• row-cols-1 row-cols-md-2的作用是：
  • 在屏幕宽度小于768px（移动端）时，每行显示1张卡片
  • 在屏幕宽度≥768px（平板及以上）时，每行显示2张卡片
• 如果你想在更大屏幕显示更多卡片，可以添加row-cols-lg-3这类类（比如row-cols-1 row-cols-md-2 row-cols-lg-3，大屏每行3张）

内容的提问来源于stack exchange，提问作者Muhammad Hurrara