Bootstrap实现左半屏图右半屏登录表单布局错位问题求助

你使用的col-6是Bootstrap栅格体系的列类，这类类名生效有两个强制前提：

• 所有col-*列元素必须是带row类的父容器的直接子元素
• 列内元素不能设置超出列宽的尺寸、偏移值，否则会挤压其他列的位置，打破栅格布局
  你的代码里两个col-6直接嵌套在<form>标签下，没有外层row容器，同时背景图元素设置了width:120vh、多个负margin属性，实际宽度远超半屏，直接把右侧表单元素挤到了图片下方。

1. 补全Bootstrap栅格必要的容器、行结构
2. 移除背景图上所有打乱布局的负margin、超宽设置，让图片适配左半屏宽度
3. 给右半屏加基础对齐样式，让表单居中展示更符合登录页交互习惯

修复后的可直接运行代码：

<form id="account" method="post" class="container-fluid p-0">
    <div class="row g-0 m-0">
        <!-- 左半屏背景图区域 -->
        <div class="col-6">
            <div class="bg-image" 
                style="background-image: url('/images/LoginLogoNew.jpg');
                height: 100vh; 
                width: 100%; 
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;">
            </div>
        </div>
        <!-- 右半屏登录表单区域 -->
        <div class="col-6 d-flex align-items-center justify-content-center px-5">
            <div style="max-width: 400px; width: 100%;">
                <label asp-for="Input.Email" class="form-label"></label>
                <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
                <!-- 密码输入框、记住我选项、登录按钮等后续表单元素直接加在这里即可 -->
            </div>
        </div>
    </div>
</form>

• 表单外层加container-fluid做全宽容器，内部嵌套row g-0作为栅格行，清除默认内外边距，保证col-6可以正常实现左右各占半屏的效果
• 左列背景图宽度改为100%适配列宽，新增background-size: cover、background-position: center属性，保证图片不变形、铺满左半屏区域，删除所有负margin设置，避免元素溢出挤走右侧内容
• 右列通过flex布局实现表单垂直、水平居中，设置最大宽度避免输入框过宽影响使用体验
• 调整了标签和输入框的顺序，符合先看提示再输入的常规交互逻辑

补充说明：如果项目中没有引入Bootstrap框架，col-6、row这类类名不会生效，需要手动编写flex或者float相关CSS实现两栏布局，上述代码基于Bootstrap 5版本编写。

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