Bootstrap5.3两栏布局：如何避免背景图溢出消除横向滚动条

你的问题主要来自两个核心原因：Bootstrap的row组件默认带负左右边距，且未用容器类包裹；深色遮罩层#dark-hue的定位设置不完整，导致布局异常。以下是具体解决方法：

1. 用容器类规范栅格布局 #

Bootstrap栅格系统要求row必须嵌套在container或container-fluid内部，否则row的负边距会超出视口宽度，触发横向滚动条。我们用container-fluid并移除默认内边距，让布局占满整个视口，同时给row加g-0去掉列间距，保证两栏刚好各占50%：

<body>
    <div class="container-fluid p-0">
        <main class="row g-0" style="height: 100vh;">
            <!-- 你的两栏内容 -->
        </main>
    </div>
</body>

2. 修正深色遮罩层的定位逻辑 #

#dark-hue需要设置为绝对定位才能正确覆盖背景图，同时要给父元素.photo-logo-section设置相对定位，让遮罩层相对于父容器定位，避免溢出：

.photo-logo-section {
    /* 原有样式保留 */
    position: relative; /* 添加相对定位 */
}

#dark-hue {
    position: absolute; /* 添加绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    mix-blend-mode: multiply;
}

3. 重置全局默认边距 #

为了避免浏览器默认样式干扰，给html和body添加基础重置：

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 兜底防止意外溢出 */
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <?php include_once './include/head.php'?>
    <title>Login</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        .login-form-section {
            display: grid;
            place-items: center;
        }

        .photo-logo-section {
            background-image: url("./assets/images/bu-bg.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
        }

        #dark-hue {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
    <div class="container-fluid p-0">
        <main class="row g-0" style="height: 100vh;">
            <section class="login-form-section col-lg-6">
                <form action="" method="post">
                    <div class="form-group w-100">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" class="form-control" required>
                    </div>
                </form>
            </section>

            <section class="photo-logo-section col-lg-6">
                <div id="dark-hue"></div>
            </section>
        </main>
    </div>
</body>
</html>

完成以上修改后，布局会严格贴合视口宽度，背景图不会溢出，横向滚动条也会消失。

内容的提问来源于stack exchange，提问作者A.Brusola