React.js双列登录页面移动端响应式适配问题求助

Hey there! Let's get that login page working smoothly on mobile devices. I’ve reviewed your code and spotted a few key issues causing the overflow and partial image display. Here’s how to fix it:

What’s Causing the Problem? #

• Fixed image dimensions: Your <img> tag has hardcoded width={680} and height={690} values, which don’t shrink to fit small screens.
• Conflicting grid styles: The right column has style={{width: '100%'}} that overrides Bootstrap’s grid system, plus col-md-offset-2 pushes content off-screen on mobile.
• Missing mobile grid classes: You’re only using col-md-* classes, which don’t adjust layout for smaller viewports.
• Typos: You have a typo in continer (should be container) which might break layout inheritance from Bootstrap.

Corrected Code with Explanations #

Here’s the revised code with responsive fixes applied:

<div className="container">
  <div className="row">
    {/* Mobile-first: Full width on small screens, 5 columns on medium+ */}
    <div className="col-12 col-md-5" style={{ paddingTop: '3%' }}>
      <div className="container"> {/* Fixed typo here */}
        <form method="post" className="form" id="form">
          <h1>Login</h1>
          <div className="form-group">
            <label htmlFor="username">Employee ID</label>
            <input 
              type="text" 
              name="username" 
              id="username" 
              placeholder="Employee ID" 
              className="form-control" 
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">Password</label>
            <input 
              type="password" 
              name="password" 
              id="password" 
              placeholder="Password" 
              className="form-control" 
            />
          </div>
          <a href>Forgot Password?</a>
          <button className="btn btn-danger mt-4" type="submit">Login</button>
        </form>
      </div>
    </div>
    {/* Mobile-first: Full width on small screens, 5 columns on medium+ (no offset on mobile) */}
    <div className="col-12 col-md-5 offset-md-2">
      {/* Remove fixed dimensions, let image scale responsively */}
      <img 
        src="../img/Cap1.PNG" 
        alt="Login illustration" 
        style={{ width: '100%', height: 'auto', objectFit: 'contain' }} 
      />
    </div>
  </div>
</div>

Key Changes Made: #

1. Mobile-first grid classes: Added col-12 to both columns so they take full width on mobile, then switch to col-md-5 on medium screens and above.
2. Responsive image: Removed fixed width/height props and added width: 100%/height: auto to let the image scale with its container.
3. Fixed typo: Changed continer to container for proper Bootstrap styling inheritance.
4. Cleaned up conflicting styles: Removed style={{width: '100%'}} from the right column (Bootstrap grid handles this) and used offset-md-2 instead of col-md-offset-2 (modern Bootstrap syntax for consistent spacing).
5. Improved accessibility: Updated the image alt text to be more descriptive.

Extra Tips for Better Mobile UX #

• Add px-3 or mx-2 classes to the form container to prevent content from touching screen edges on mobile.
• Use Bootstrap’s text-center class on the <h1> if you want the login heading centered on small screens.
• Test with browser dev tools’ responsive mode to tweak padding/margins for different screen sizes.

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