如何用Bootstrap实现3张卡片的响应式行？解决卡片换行问题

Hey there! Let's get those 3 cards sitting neatly in a single row with proper responsiveness, just like the layout style you referenced.

Why Your Current Code Isn't Working #

The col-sm-4 classes should make 3 columns fit on a row for screens ≥576px, but there are two common culprits for the unexpected wrap:

1. Style Conflicts: Putting the card class directly on the col-sm-4 element might add extra margins/padding that push the total width over 100% of the row.
2. Unoptimized Responsive Rules: Without clear behavior defined for smaller screens, or if custom CSS is overriding Bootstrap's grid, you'll get messy wrapping.

Fixed Code with Proper Responsiveness #

Here's the adjusted code that ensures 3 cards stay aligned in a row on medium+ screens, and stacks neatly on mobile devices:

<div class="container">
  <div class="row g-3"> <!-- `g-3` adds consistent gap between columns (adjust to g-0 to g-5 as needed) -->
    <div class="col-12 col-sm-4">
      <div class="card">1</div> <!-- Separate card from column to avoid style clashes -->
    </div>
    <div class="col-12 col-sm-4">
      <div class="card">2</div>
    </div>
    <div class="col-12 col-sm-4">
      <div class="card">3</div>
    </div>
  </div>
</div>

Key Improvements Explained #

• Separated Column & Card Classes: Moving the card class into its own div prevents Bootstrap's grid padding from conflicting with the card's internal margins, ensuring total width stays within the row's bounds.
• Responsive Breakpoints:
  • col-12: Makes each card take full width on extra-small screens (<576px), so they stack vertically for mobile-friendly viewing.
  • col-sm-4: Switches to 3 equal columns on small screens and up, keeping them locked in a single row.
• Controlled Gaps: The g-3 class on the row sets uniform spacing between columns without relying on card margins—this is Bootstrap's recommended way to handle grid gaps cleanly.

Extra Tips #

• If you want the 3-card row to stay intact even on very small screens, replace col-12 with col-4—just note this might make cards look cramped on tiny devices, so test thoroughly.
• Double-check your custom CSS for any width or margin rules applied to .col-sm-4 or .card that could break the grid layout.

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