html - 在 react js Bootstrap 4 和 5 不能一起工作中，我在 index.html 的两个 CDN 链接中都包含了 CDN

Question

使用 bootstrap 5，此代码无法正常工作，但使用 bootstrap 4，它可以正常工作。当我在 index.html 中包含 bootstrap 5 cdn 时，图像会变大并且不适合网格，所以我有两列，一列是登录屏幕，另一列是图像，每当我包含 bootstrap 5 时，图像的形状会完全改变有没有人知道如何解决。

 <div className = "rock"> 
            <div className="container" >    
            <div className="row">   
            <div></div>
            <div className="col-sm-6 form-group" style ={{paddingTop: "15%", paddingRight: "130px"}}>
            <div className ="Fire"><img src={firelogo} alt="try again" /></div>   
                <h1 className= "fire_logo">JEEVAN RAKSHA</h1>
                <div className="continer">
                  <form className="form" >
                  <p className = "login_txt"> Login </p>
                  <div className="txt_field">
                    <input type="name" required />
                      <span></span>
                      <label>Employee ID</label>
                    </div>
                    <div className="txt_field">
                      <input type="password" required />
                      <span></span>
                    <label>Password</label>
                    </div>
                    <Link to ='/ForgotPassword' className ="forgot_pass">Forgot Password?</Link>
                    <div className = "button_login">
                    <button  className="btn btn-danger mt-4" type="submit">Login</button>
                    </div>
                  </form>
                </div>
              </div>
              <div className="col-sm-6 form-group" style={{width: '100%', height: 'auto', objectFit: 'contain'}}>
                <img src={Cap1} alt="try again" className= "image_size_login" />
              </div>
            </div>
          </div> 
          
        </div>

标签： htmlcssreactjsbootstrap-4