0

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

这是我所做的设计。我希望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%);
}

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

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

4

1 回答 1

0

您可以使用引导功能：

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

于 2020-01-05T17:10:01.860 回答