Bootstrap5容器左侧留白响应式问题求助

问题分析 #

全屏状态下布局正常，但响应式测试时左侧图片始终存在留白，核心原因包括：

• body默认自带margin，导致最外层容器无法完全贴边
• 最外层container-fluid未设置最小高度，小屏幕下父级高度未撑满视口，图片h-100属性失效
• 图片仅用w-100 h-100未处理比例适配，当容器比例与图片比例不符时，会出现留白

解决方案 #

1. 清除body默认边距 #

给<body>标签添加m-0类，或在自定义CSS中设置：

body {
  margin: 0;
}

2. 让容器占满视口高度 #

给最外层的container-fluid添加min-vh-100类，确保它至少占满屏幕高度，让内部row和图片的h-100生效。

3. 图片添加比例适配属性 #

给左侧图片添加object-fit: cover样式，让图片按比例覆盖容器，避免留白或拉伸。可通过行内样式实现：

<img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100" style="object-fit: cover;">

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
        body {
            margin: 0;
        }
    </style>
    <link rel="stylesheet" href="supertest.css">
</head>
<body class="m-0">
    <div class="container-fluid g-0 m-0 p-0 min-vh-100">
        <div class="row g-0 h-100">
            <div class="col-8 g-0 m-0 p-0 h-100">
                <img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100" style="object-fit: cover;">
            </div>

            <div class="col-4 overflow-hidden d-flex flex-column h-100">
                <div class="text-center pt-5 mb-2">
                    <img src="PUPLogo.png" alt="" class="w-25">
                </div>
                <h1 class="text-center">Reg<span>iTech</span></h1>
                <h2 class="px-5">Login</h2>
                <form>
                    <div class="form-group px-5 mb-3">
                        <input type="text" class="form-control" id="username" placeholder="Username">
                    </div>
                    <div class="form-group px-5">
                        <input type="password" class="form-control" id="password" placeholder="Password">
                    </div>
                    <div class="d-flex justify-content-center mt-3">
                        <button type="submit" class="btn w-50 ">Submit</button>
                    </div>
                </form>

                <div class="mt-3 text-center">
                    don't have an account yet ?
                </div>
                <div class="row text-center mt-auto">
                    <div class="copyright">
                        Copyright@2022 | RegiTech | Developed DICT 3-1
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>

额外检查点 #

• 确认supertest.css中没有给容器、行或图片添加额外的padding/margin或宽高限制，避免样式冲突
• 如果需要在更小屏幕上调整布局，可使用Bootstrap响应式列类（如col-md-8）替代固定的col-8

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