子div未随父div移动，求登录表单居中及Bootstrap栅格系统指导

Hey there! Let's sort out your login form centering issue first, then dive into the Bootstrap grid system—you’ve got this!

Fixing the Centered Login Form #

Your current form-div uses fixed left and top values, which break responsiveness because they don’t adapt to different screen sizes. Here are two solid solutions:

1. Pure CSS Flexbox (No Frameworks)

This is the simplest modern way to center elements. Update your .containers and .form-div styles like this:

.containers {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        to bottom,
        rgba(47, 84, 150, 0.62),
        rgba(97, 53, 119, 0.93)
    ), url("background.png");
    position: fixed;
    background-size: cover; /* Replaces fixed 100% 120% to preserve image ratio */
    opacity: 0.85;
    /* Add flex properties to center child elements */
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center (optional, but nice for full-screen layouts) */
}

.form-div {
    width: 395px;
    max-width: 90%; /* Prevents form from overflowing small screens */
    height: 437px;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 9px 19px #0000003d;
    border-radius: 10px;
    opacity: 1;
    /* Remove position: relative, top, and left—flex handles positioning */
}

2. Absolute Position + Transform (Alternative)

If you prefer not to use flexbox, this classic method works too:

.containers {
    /* Keep your existing styles, just ensure it's a positioned parent */
    position: fixed;
    width: 100%;
    height: 100%;
    /* ... rest of your styles ... */
}

.form-div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Shifts element back by half its own width/height to center it */
    width: 395px;
    max-width: 90%;
    /* ... rest of your styles ... */
}

Understanding the Bootstrap Grid System #

Bootstrap’s grid is a 12-column responsive layout system that takes the hassle out of writing media queries for different screen sizes. Here’s the core breakdown:

Key Components

• Containers: Wrap your grid to add padding and constrain width. Use:
  • .container: Fixed-width container that adjusts at different breakpoints (e.g., wider on desktop, narrower on mobile).
  • .container-fluid: Full-width container that spans the entire viewport.
• Rows: Use <div class="row"> to wrap columns. Rows are flex containers that automatically arrange columns in a row, wrapping them when space runs out.
• Columns: Use <div class="col-*"> where * is a number 1-12 (representing how many of the 12 columns the element should take up). Add responsive prefixes to adjust behavior across screen sizes:
  • col-xs-*: Extra small screens (<576px)
  • col-sm-*: Small screens (≥576px)
  • col-md-*: Medium screens (≥768px)
  • col-lg-*: Large screens (≥992px)
  • col-xl-*: Extra large screens (≥1200px)

Example: Bootstrap Login Form

Here’s how you’d rebuild your form with Bootstrap for perfect responsiveness:

<!-- First, make sure Bootstrap CSS is included in your project -->
<div class="containers container-fluid d-flex justify-content-center align-items-center min-vh-100">
  <div class="row">
    <!-- Column adjusts width based on screen size -->
    <div class="col-md-4 col-sm-6 col-10">
      <div class="form-div p-4">
        <!-- Your form content (inputs, buttons, etc.) goes here -->
      </div>
    </div>
  </div>
</div>

Simplified CSS:

.containers {
    background-image: linear-gradient(
        to bottom,
        rgba(47, 84, 150, 0.62),
        rgba(97, 53, 119, 0.93)
    ), url("background.png");
    background-size: cover;
    opacity: 0.85;
}

.form-div {
    background: #ffffff;
    box-shadow: 0px 9px 19px #0000003d;
    border-radius: 10px;
    height: 437px;
}

In this example:

• d-flex justify-content-center align-items-center: Bootstrap classes to center the form horizontally and vertically.
• min-vh-100: Ensures the container takes up the full viewport height.
• col-md-4 col-sm-6 col-10: The column will take 4/12 width on medium+ screens, 6/12 on small screens, and 10/12 on extra small screens—perfect for responsiveness!

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