Bootstrap5如何实现登录页左侧文本、右侧登录表单的布局

你之前的代码无法实现左右分栏的核心问题是：把站点介绍、登录表单分别放在了两个独立的.container和.row容器中。Bootstrap栅格规则下，只有同一个.row下的并列列元素才会横向排列，独立的row默认会上下堆叠。

具体实现逻辑 #

• 仅保留1个外层容器，推荐用min-vh-100类让容器占满整个视口高度，搭配d-flex align-items-center实现内容垂直居中
• 容器内只放1个.row作为栅格行
• 站点介绍、登录表单作为该行下的两个并列列：中等及以上屏幕（≥768px）下各占一半宽度，小屏幕下自动切换为上下堆叠的移动端布局
• 你原有两个模块的内部内容可以直接复用，不需要调整内部结构

完整可运行代码 #

<!-- 外层容器，占满全屏高度、内容垂直居中 -->
<div class="container min-vh-100 d-flex align-items-center py-5">
    <div class="row w-100 gx-5">
        <!-- 左侧：站点介绍，md及以上尺寸占6列 -->
        <div class="col-md-6 mb-4 mb-md-0">
            <h6 class="display-5 fw-bold text-primary">
                Borinati is the place to gain and share knowledge.<br />
                <span class="text-primary">
                    It's a website to ask questions based on categories and connect with Professional people
                    around the world.
                </span>
            </h6>
        </div>
        <!-- 右侧：登录表单，md及以上尺寸占6列 -->
        <div class="col-md-6">
            <form method="POST">
                {% csrf_token %}
                <div class="mb-3">
                    <label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;" class="form-label">Enter Username</label>
                    <input type="text" class="form-control" name="username">
                </div>
                <div class="mb-3">
                    <label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;" class="form-label">Enter Password</label>
                    <input type="password" class="form-control" name="password">
                </div>
                <div class="mb-3">
                    <a href="{% url 'register' %}" style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">
                        Create An Account
                    </a>
                </div>
                <button type="submit" class="btn btn-primary">Login</button>
            </form>
        </div>
    </div>
</div>

补充说明 #

• 代码里的gx-5是给两个列加水平间距，避免左右内容贴太近
• 原来代码里硬写的<br>标签替换成了BS5自带的mb-3底部间距类，排版更规范，也方便后续统一调整间距
• BS5中已经废弃了旧版的form-group类，直接用间距类控制表单元素距离即可，不影响原有样式逻辑
• 小屏幕下列会自动堆叠，不需要额外写媒体查询适配移动端

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