移动端Grid system异常：四图布局下排居中适配问题求助

Let's get this sorted out—your goal of having a 2x2 image grid on mobile and a centered row of 4 images on desktop is totally achievable with Bootstrap's grid system, we just need to tweak your structure a bit.

What's Off With the Current Code? #

• The empty col-1 is creating an unwanted offset on mobile, pushing your second row of images to the right instead of centering them.
• Your column widths (col-5 on mobile, col-sm-2 on desktop) don’t align with Bootstrap’s 12-column grid, leading to uneven spacing and misalignment across screen sizes.

The Fixed Solution #

Here’s the revised code that will work exactly as you want:

<div class="col-12">
  <div class="row justify-content-center">
    <!-- Mobile: 2 columns per row (col-6), Desktop: 4 columns per row (col-sm-3) -->
    <div class="col-6 col-sm-3 aboutMid aboutMid1 text-center">
      <img src="assets/about/about1.jpg" class="img-fluid">
    </div>
    <div class="col-6 col-sm-3 aboutMid aboutMid1 text-center">
      <img src="assets/about/about2.jpg" class="img-fluid">
    </div>
    <div class="col-6 col-sm-3 aboutMid aboutMid1 text-center">
      <img src="assets/about/about3.jpg" class="img-fluid">
    </div>
    <div class="col-6 col-sm-3 aboutMid aboutMid1 text-center">
      <img src="assets/about/about4.jpg" class="img-fluid">
    </div>
  </div>
</div>

Key Changes Explained: #

• justify-content-center on the row: This ensures all columns are centered horizontally within the row, no matter the screen size.
• col-6 col-sm-3 for each image container:
  • On mobile (screen width <576px), col-6 makes each image take up half the row width, automatically creating a clean 2x2 grid.
  • On desktop (screen width ≥576px), col-sm-3 makes each image take up 1/4 of the row width, fitting all 4 in a single centered row.
• text-center on the column: Centers the image inside its container. If you prefer, you could also add mx-auto d-block directly to the <img> tag for the same effect.
• img-fluid class: Makes your images responsive, so they scale with their container without overflowing or getting distorted.

Optional Style Tweak (For Spacing) #

If you want some breathing room between your images, add padding to your aboutMid class:

.aboutMid {
  padding: 0.5rem;
}

This will keep your images from touching each other while maintaining the clean grid layout.

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