如何用Bootstrap实现轮播内卡片随屏幕尺寸响应式缩放（2×2转1×4）

Got it, let's break down why your mobile layout is messed up and fix it step by step. The main issues are with your grid structure, missing responsive Bootstrap classes, and conflicting custom CSS that overrides Bootstrap's built-in layout behavior.

What's Causing the Problem? #

• You’re using two separate .row elements with plain .col classes, which don’t have responsive breakpoints. Bootstrap can’t automatically adjust these columns on small screens.
• Your custom .card CSS has fixed width: 20vh and huge margin: 80px, which forces cards to stay tiny and creates overflow on mobile.
• There’s a typo in your CSS: .cart-text should be .card-text (this was breaking your project description styling).

Step-by-Step Solution #

1. Update the Grid Structure #

Replace your two separate .row blocks with a single .row containing four col-md-6 columns. Here’s how it works:

• col-md-6: On screens ≥768px (desktop), each column takes 50% of the row width (so 2 cards per row, forming a 2×2 grid).
• On screens smaller than 768px (mobile), each column automatically switches to 100% width (1 card per row, forming a 1×4 grid).
• Add mb-4 (Bootstrap’s margin-bottom utility) to each column to add clean spacing between cards without using custom margins.

2. Clean Up Custom Card CSS #

Remove the fixed width and excessive margin from your .card style. Bootstrap’s grid will handle the card width, and we’ll use utility classes for spacing instead.

3. Fix the CSS Typo #

Change .cart-text to .card-text so your project descriptions inherit the correct styling.

Modified Code Snippets #

Updated HTML (Projects Carousel Item)

<div class="carousel-item">
  <div class="container">
    <h1>Projects</h1>
    <!-- Project Showcase - Fixed Grid -->
    <div class="row">
      <!-- Card 1 -->
      <div class="col-md-6 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Project 1</h5>
            <p class="card-text">Project Info</p>
          </div>
        </div>
      </div>
      <!-- Card 2 -->
      <div class="col-md-6 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Project 2</h5>
            <p class="card-text">Project Info</p>
          </div>
        </div>
      </div>
      <!-- Card 3 -->
      <div class="col-md-6 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Project 3</h5>
            <p class="card-text">Project Info</p>
          </div>
        </div>
      </div>
      <!-- Card 4 -->
      <div class="col-md-6 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Project 4</h5>
            <p class="card-text">Project Info</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Updated CSS (Card Section)

.card {
  background-color: #FFBEAB;
  display: flex;
  /* Removed fixed width and large margin */
}

/* Fixed typo from .cart-text to .card-text */
.card-text {
  /* Optional: Add custom styling for project descriptions here */
}

Additional Tips #

• If you want to adjust card padding or height, use Bootstrap’s utility classes like p-3 (padding) or h-100 (full height) instead of custom CSS, to keep things responsive.
• Test the layout on different screen sizes using your browser’s dev tools (Ctrl+Shift+I on Chrome/Firefox) to make sure it behaves as expected.

This setup will give you the 2×2 grid on desktop and 1×4 grid on mobile, with clean, responsive spacing that doesn’t break on small screens.

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