如何使我的卡片不那么宽并且有3列

问题描述

所以我的页面上有几张卡片（大约15张），目标是将它们全部以网格的形式显示，如3列5行。 由于某种原因，它仅显示2列，但我不确定为什么。我尝试使用w-25设置卡片的宽度，但这使我开始缩小网页时看起来很奇怪。

这是我设置w-25的地方，当页面缩小时，这些卡片就不会堆叠在一起，它们只是挤在一起了

<div class="card card-with-border ml-2 mr-2 mt-5 w-25">

这是卡片的代码，我从下面的代码中删除了w-25。

<div class="row justify-content-center mb-4">

    @foreach (var user in Model)
    {
        <div class="card card-with-border ml-2 mr-2 mt-5 ">
            <div class="card-body mb-0">
                @foreach (var item in user.Tags)
                {
                    <span class="badge badge-primary mt-3 ml-0">@item</span>
                }
            </div>

            <div class="card-body socialprofile filter-cards-view pt-2">


                <div class="media">

                    <div class="avatar ratio"><img class="b-r-8 height-50 mr-3 img-80" src=@user.Image alt="#"></div>
                    <div class="media-body">
                        <h6 class="font-danger f-w-600">Hello,World!</h6>

                        <h5><i class="icofont icofont-social-snapchat"></i></h5>
                        <span class="card-text"><h5><i class="icofont icofont-social-instagram"></i></h5><p></p></span>
                        <p class="card-text mt-2">Testing the text lets see what it looks like.</p>
                    </div>
                </div>
                <div class="social-btngroup d-flex">
                    <button class="btn btn-primary w-100">Like</button>
                </div>
                <div class="likes-profile text-center">
                    <h5> <span> <i class="fa fa-heart font-danger"></i> 884</span></h5>
                </div>
            </div>
        </div>
    }
</div>

解决方法

使用col-4将div卡放入div，因此每行3列。然后只需添加所需的填充。 <div class="col-4 px-2">

 <div class="row justify-content-center mb-4">     
    @foreach (var user in Model)
            {     
        <div class="col-4 px-2">
              <div class="card card-with-border mt-5 ">
                        <div class="card-body mb-0">
                            @foreach (var item in user.Tags)
                            {
                                <span class="badge badge-primary mt-3 ml-0">@item</span>
                            }
                        </div>
            
                        <div class="card-body socialprofile filter-cards-view pt-2">
            
            
                            <div class="media">
            
                                <div class="avatar ratio"><img class="b-r-8 height-50 mr-3 img-80" src=@user.Image alt="#"></div>
                                <div class="media-body">
                                    <h6 class="font-danger f-w-600">Hello,World!</h6>
            
                                    <h5><i class="icofont icofont-social-snapchat"></i></h5>
                                    <span class="card-text"><h5><i class="icofont icofont-social-instagram"></i></h5><p></p></span>
                                    <p class="card-text mt-2">Testing the text lets see what it looks like.</p>
                                </div>
                            </div>
                            <div class="social-btngroup d-flex">
                                <button class="btn btn-primary w-100">Like</button>
                            </div>
                            <div class="likes-profile text-center">
                                <h5> <span> <i class="fa fa-heart font-danger"></i> 884</span></h5>
                            </div>
                        </div>
                    </div>
             </div>
        
        }
    </div>