Html 如何修改引导的卡列？

我正在使用Bootstrap4中的

card columns

类为我的投资组合设计一个页面。一切都很好，但我想改变一下外观，让它看起来更有吸引力

这是我做的设计。我希望其他项目（与最新项目宽度相同）卡位于最新项目下方，以便其他项目（根据当前图片）下方的卡位于该列顶部，然后技能

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <h3 class="card-title">About Me</h3>
            <hr>
            <div class="card-text">
                <ul>
                    <li><b>Languages:</b> Python, JAVA, C</li>
                    <li><b>Frameworks:</b> Bootstrap (Frontend), Flask, Django, OpenCV</li>
                    <li><b>Database:</b> MySQL, MS SQL Server</li>
                    <li><b>Tools:</b> MySQL Workbench, Git</li>
                    <li><b>Editors Used:</b> Visual Studio Code, Sublime Text, Vim</li>
                    <li><b>Operating Systems:</b> Linux (Ubuntu), Windows</li>
                    <li><b>Total Experience: </b>Freshers</li>
                    <li><b>Current Employer: </b>Student</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="card p-3">
        <div class="card-body">
            <h3 class="card-title">Latest Projects</h3>
            <hr>
            <div class="card-text">
                <h5 class="text-center">BT Real Estate</h5>
                <img src="{{url_for('static', filename='pic/btre.png')}}" alt="BTRE" class="btre">
                <label style="font-size: 10pt;">
                    <b>Technology Used: </b>HTM/CSS/JS(Frontend), Python-Django(Backend), Postgres SQL(Database)
                </label>
            </div>
            <div class="row no-gutters">
                <div class="col-md-4">
                    <img src="{{url_for('static', filename='pic/rms.png')}}" class="card-img" alt="rms" height="150" style="margin-top: 30px;">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 style="font-size: 1.2rem;">Reminder Management System</h5>
                        <label style="font-size: 12pt;"><b>Technology Used: </b></label>
                        <label>HTML/CSS/JS(Frontend), Python-Flask(Backend), Postgres SQL(Database)</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card p-3">
        <div class="card-body">
            <h3 class="card-title">Other Projects</h3>
            <hr>
            <div class="card-text">
                <h5>Stock Management System</h5>
                <p>Manages stock of a company and it's distributor & outlet. Distributor can buy product from Company and Outlet can buy from Distributor.</p>
                <label><b>Technology Used: </b></label>
                <label>HTML/CSS/JS(Frontend), Python-Flask(Backend), Postgres SQL(Database)</label>
            </div>
        </div>
    </div>
    <div class="card" style="max-width: 25rem;">
        <div class="card-body">
            <div class="card-text">
                <ul>
                    <li class="contact"><i class="fas fa-map-marker-alt"></i>Kolkata, West Bengal, India</li>
                    <li class="contact"><i class="far fa-envelope"></i>avishek.arunavo1997@gmail.com</li>
                    <li class="contact"><i class="far fa-file-alt"></i>Download Resume</li>
                    <li class="contact"><i class="far fa-comments"></i>Contact Me</li>
                </ul>
            </div>
        </div>
    </div>
</div>

这是我为制作2列而编辑的

card列

css

---

如果您能帮助我，那就太好了。

您可以使用引导功能：

<div class="card p-3 col-12">
<div class="card-body">
<h3 class="card-title">Other Projects</h3>

其他项目

使剖面全宽，并将其移动到最新项目下方。 因此，如果您想让“卡体”div像前面一样更宽，可以使用

col-6

包装

以下是您可以使用的引导功能的完整列表：

---

添加

col-12

如何帮助我将卡片移到

最新项目

卡片下方。根据

card columns

，我认为将针对其所在的列生成12列。我建议您阅读一本基本的引导指南，以了解列和行的概念。你的回答没有解决我的问题。我试过了。

<div class="card p-3 col-12">
<div class="card-body">
<h3 class="card-title">Other Projects</h3>

</div>
</div>