Bootstrap卡片移动端向左偏移问题求助

Hey there! I’ve run into this exact Bootstrap card layout issue before, so let’s break down what’s causing the left shift and fix it step by step.

What’s Causing the Problem? #

Looking at your code, a couple of key issues are leading to the mobile misalignment:

• You’ve set a fixed width: 18rem on your cards. On small mobile screens, this fixed width clashes with Bootstrap’s responsive grid columns, causing overflow or unwanted left shifting.
• The justify-content-center class is applied to your columns, but Bootstrap’s col-* elements aren’t flex containers by default—so this class isn’t actually doing anything to center the cards inside their columns.

The Fix #

Here’s how to adjust your code for perfectly centered, responsive cards across all devices:

1. Remove the fixed card width: Let Bootstrap’s grid handle the card width by deleting style="width: 18rem;" from each card. This lets cards adapt to their column’s width on every screen size.
2. Turn columns into flex containers: Add the d-flex class to each col-md-6 col-lg-3 element. This activates flexbox, so justify-content-center will finally work to center the card inside its column.
3. Keep spacing consistent: Stick to Bootstrap’s built-in spacing classes to avoid custom styles that might break responsiveness.

Modified Code #

<div class="container">
  <div class="row g-mb-20">
    <div class="col-md-6 col-lg-3 g-mb-50 d-flex justify-content-center">
      <div class="card">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="Surf scene">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 g-mb-50 d-flex justify-content-center">
      <div class="card">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="Surf scene">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 g-mb-50 d-flex justify-content-center">
      <div class="card">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="Surf scene">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 g-mb-50 d-flex justify-content-center">
      <div class="card">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="Surf scene">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Extra Tips #

• If you want a maximum width for cards on larger screens, add a custom CSS class like .card-max-width { max-width: 18rem; } instead of inline styles—this keeps mobile responsiveness intact.
• Replace custom spacing classes like g-mb-20 with Bootstrap’s native g-4 (adjust the number for more/less gap) on the row element for better consistency with Bootstrap’s design system.

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