React与Bootstrap布局：实现Card顶部间距而不影响背景图像

<div className='container-flex remove-whitespace'>
    <div style={background}> {/* 这个div承载背景图像 */}
        <div className="col-md-6 m-auto">
            <div className='container'>
                <div className = "card card-body mt-5"> {/* 问题发生在这里：mt-5 */}
                    <h2 className="text-center">Register</h2>
                    {/* 表单内容 */}
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">

<div className='container-flex'>
    {/* 这个div承载背景图像，其定位不受内部padding影响 */}
    <div style="background-image:url('https://picsum.photos/id/11/600/800'); background-size: cover; background-position: center;"> 

        {/* 这是卡片的直接父容器，为其添加顶部内边距 */}
        <div className='container pt-5'> {/* 使用pt-5代替mt-5 */}
            <div className = "card card-body"> {/* 卡片本身不再需要mt-5 */}
                <h2 className="text-center">Register</h2>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label>Username</label>
                        <input type="text" className="form-control" name="username" onChange={this.onChange} value={username} />
                    </div>
                    <div className="form-group">
                        <label>Email</label>
                        <input type="email" className="form-control" name="email" 
                        onChange={this.onChange} value={email} />
                    </div>
                    <div className="form-group">
                        <label>Password</label>
                        <input type="password" className="form-control" name="password" 
                        onChange={this.onChange} value={password} />
                    </div>
                    <div className="form-group">
                        <label>Confirm Password</label>
                        <input type="password" className="form-control" name="password2" 
                        onChange={this.onChange} value={password2} />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary">
                            Register
                        </button>
                    </div>
                    <p>
                        Already have an account? <Link to="/login">Login</Link>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>