如何修改引导程序的卡片列？

Question

我正在使用 Bootstrap 4 中的 card-columns 类为我的作品集设计一个页面。一切都很好，但我想改变一下外观，让它看起来更有吸引力。

这是我做的设计。我希望 Other Projects（与 Latest Projects 宽度相同）卡片保持在 Latest Projects 下方，以便 Other Projects 下方的卡片（根据当前图片）停留在该列的顶部，然后是 Skills。

<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>

This is the template

.card-columns
{
    column-count: 2 !important;
    position: relative;
    top: 10%;
    transform: translateY(10%);
    -moz-transform: translateY(10%);
}

这是我为制作 2 列而编辑的 card-columns css。

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

Answer 1

您可以使用引导功能：

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

...

</div>
</div>

使部分全宽并将其移动到最新项目下方。 因此，如果您想让部分更宽，可以使用 col-6 包裹“card-body” div。

您可以使用的引导功能的完整列表如下： https://hackerthemes.com/bootstrap-cheatsheet/