Bootstrap 4：修改页面背景色不影响container容器的解决方法

问题描述 #

开发登录页面使用Bootstrap 4.6框架时，修改页面背景色会导致内部div容器颜色随之改变，希望仅让页面背景色变化，容器保持独立样式。

问题截图：

原代码：

<section class="vh-100 gradient">
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card-border-0 shadow rounded-2 my-5 mx-3">
                    <div class="card-header p-1 p-sm-3">
                        <h3>Client Management Portal</h3>
                    </div>
                    <div class="card-body p-4 p-sm-5">
                        {%include "components/alerts.html"%}
                        <form action="" method="post">
                            {%csrf_token%}
                            <div class="form-floating mb-3">
                                <label for="password">Username</label>
                                {{form.username}}
                            </div>
                            <div class="form-floating mb-3">
                                <label for="password">Password</label>
                                <div class="input-group form-floating mb-3">
                                    {{form.password}}
                                    <div class="input-group-append bg-white" id="">
                                        <span class="input-group-text" id="passwd">
                                            <i class="fas fa-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-grid">
                                <button class="btn btn-success">Login</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer p-2">
                        <a class="text-muted" href="#">No account? register here</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    .gradient-custom {
    /* fallback for old browsers */
    background: #6a11cb;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #36D1DC, #5B86E5);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #36D1DC, #5B86E5)
  }
</style>

注：代码中的双大括号为Django模板语法，可忽略。

解决方案 #

问题根源有两个：

• 卡片容器未正确使用Bootstrap的card基础类，导致没有默认白色背景，继承了父元素的背景色
• section的类名与CSS样式定义的类名不匹配，背景渐变未正确应用到section

步骤1：修正卡片容器类名 #

将卡片容器的card-border-0改为card border-0，Bootstrap的card组件需要先添加card类才能启用默认样式（包括白色背景），border-0是独立工具类用于移除边框：

<div class="card border-0 shadow rounded-2 my-5 mx-3">

步骤2：修正section类名 #

将section的gradient类改为gradient-custom，与CSS中定义的样式类名匹配，确保背景渐变只应用到section：

<section class="vh-100 gradient-custom">

修正后的完整代码 #

<section class="vh-100 gradient-custom">
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
                <div class="card border-0 shadow rounded-2 my-5 mx-3">
                    <div class="card-header p-1 p-sm-3">
                        <h3>Client Management Portal</h3>
                    </div>
                    <div class="card-body p-4 p-sm-5">
                        {%include "components/alerts.html"%}
                        <form action="" method="post">
                            {%csrf_token%}
                            <div class="form-floating mb-3">
                                <label for="password">Username</label>
                                {{form.username}}
                            </div>
                            <div class="form-floating mb-3">
                                <label for="password">Password</label>
                                <div class="input-group form-floating mb-3">
                                    {{form.password}}
                                    <div class="input-group-append bg-white" id="">
                                        <span class="input-group-text" id="passwd">
                                            <i class="fas fa-eye-slash"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="d-grid">
                                <button class="btn btn-success">Login</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer p-2">
                        <a class="text-muted" href="#">No account? register here</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    .gradient-custom {
    /* fallback for old browsers */
    background: #6a11cb;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #36D1DC, #5B86E5);
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #36D1DC, #5B86E5)
  }
</style>

修改后，section会显示渐变背景，而卡片容器因Bootstrap的card类自带白色背景，不会继承section的背景色，实现页面背景与容器样式分离的效果。

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