基于Bootstrap实现响应式叠加浮动Div：中等屏叠加小屏堆叠

Hey there! Let's build this layout exactly as you need—overlapping divs on medium screens, and clean vertical stacking on smaller devices. We'll use Bootstrap's responsive grid system combined with a touch of custom CSS to pull this off.

Step 1: HTML Structure #

First, set up the basic layout using Bootstrap's container, row, and column classes. We'll use col-md-6 so each div takes half the width on medium screens (768px and up), and full width on smaller screens by default.

<div class="container my-5">
  <div class="row justify-content-center">
    <!-- Top overlapping card -->
    <div class="col-md-6">
      <div class="overlap-card card-top">
        <h3>First Card</h3>
        <p>This card sits on top of the others when viewing on medium+ screens.</p>
      </div>
    </div>
    <!-- Middle overlapping card -->
    <div class="col-md-6">
      <div class="overlap-card card-middle">
        <h3>Second Card</h3>
        <p>This card is partially covered by the first one on medium screens.</p>
      </div>
    </div>
    <!-- Bottom overlapping card (optional, for multi-card overlap) -->
    <div class="col-md-6">
      <div class="overlap-card card-bottom">
        <h3>Third Card</h3>
        <p>This sits behind the middle card on medium-sized displays.</p>
      </div>
    </div>
  </div>
</div>

Step 2: Custom CSS #

Add this CSS to create the overlap effect on medium screens and adjust spacing for small screens. We'll use Bootstrap's default breakpoint for medium screens (768px) to trigger the overlap.

/* Base card styling for all screen sizes */
.overlap-card {
  padding: 2.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

/* Overlap effect for medium screens and above */
@media (min-width: 768px) {
  .overlap-card {
    /* Adjust this value to control how much the cards overlap */
    margin-left: -4rem;
    position: relative;
  }

  /* Z-index ensures cards stack in the correct order (top card stays on top) */
  .card-top {
    z-index: 3;
  }
  .card-middle {
    z-index: 2;
  }
  .card-bottom {
    z-index: 1;
  }
}

/* Vertical stacking adjustments for small screens */
@media (max-width: 767px) {
  .overlap-card {
    /* Add spacing between stacked cards */
    margin: 1.5rem 0;
  }
}

How This Works #

• Responsive Grid: Bootstrap's col-md-6 makes each div take 50% width on medium screens, and 100% width on small screens—so they automatically stack vertically without extra work.
• Overlap Logic: On medium screens, the negative margin-left pulls each subsequent card to the left, overlapping the previous one. The position: relative and z-index values ensure the first card stays on top, so content isn't hidden.
• Customization: Tweak the margin-left value to adjust overlap amount, or modify the card styles (colors, padding, shadows) to match your design.

Just make sure you've included Bootstrap's CSS in your project (either via local file or CDN) before adding this custom code, and you're good to go!

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