如何在Bootstrap 4图片Div上固定位置放置响应式文本

Let's tackle this problem—your goal is to pin three text elements to specific positions on an image using Bootstrap 4, no background images required, and have them stay put no matter the screen size. The main issue with your original code is relying on fixed pixel values for positioning (like bottom: 150px) which break when the image scales down on small screens. Here's how to fix it step by step:

Step 1: Clean Up the HTML Structure #

We’ll use Bootstrap’s built-in positioning classes to avoid custom relative/absolute conflicts, and wrap all text elements in a single anchored container. This keeps everything grouped and easier to control:

<div class="slider">
  <div class="cover-image position-relative">
    <!-- All text elements go inside this anchored overlay container -->
    <div class="image-overlay position-absolute w-100">
      <div class="image-date">
        <p>08.10.2017</p>
      </div>
      <div class="image-text">
        <h2>Gradjevina koja se gradi duze od egipatskih piramida</h2>
      </div>
      <a href="#" class="image-link">Eskterijer</a>
    </div>
    <img class="img-fluid" src="http://vietlongtravel.com/wp-content/uploads/2017/05/151548909_high-770x530.jpg">
  </div>
</div>

Step 2: Adjust CSS for Responsive Positioning #

Instead of fixed pixels, use percentage values for positioning—this ensures the text stays proportional to the image’s size as it scales. We’ll also add responsive font sizing to prevent text overflow on small screens:

/* Base styles for the overlay container */
.cover-image .image-overlay {
  bottom: 2%; /* Anchor to the bottom with a proportional gap */
  left: 1%; /* Proportional left gap that scales with screen size */
  color: white;
}

/* Date styling */
.image-date {
  border-bottom: 1px solid white;
  margin-bottom: 1rem;
  display: inline-block; /* Keep the border only around the text, not full width */
}

/* Title styling with dynamic font size */
.image-text h2 {
  font-family: Oswald;
  font-weight: 600;
  /* Scale font from 24px to 40px based on screen width */
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
  text-transform: none;
}

/* Link styling */
.image-link {
  color: white;
  text-decoration: underline;
}

Why This Works #

• Bootstrap Positioning Classes: position-relative on the image container ensures the absolute overlay is tied to the image, not the entire page. position-absolute on the overlay anchors it perfectly within the image bounds.
• Percentage Positioning: Using bottom: 2% instead of 20px means the gap between text and image bottom stays proportional to the image’s height, even when it shrinks on mobile.
• Responsive Font Size: The clamp() function dynamically adjusts the title’s font size—smaller on mobile, larger on desktop—so it never overflows or becomes too tiny.
• Cleaner Hierarchy: Grouping all text elements in one overlay container eliminates conflicting absolute positions and makes adjusting their collective placement easier.

Bonus: Tweak for Extra Small Screens #

If you want to ensure the title never wraps awkwardly, add a media query to fine-tune line height or add text truncation (optional):

@media (max-width: 576px) {
  .image-text h2 {
    line-height: 1.2;
    /* Optional: Truncate long text with ellipsis */
    /* overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
  }
}

Now your text elements will stay fixed to their intended positions on the image, whether viewed on a large desktop or a small mobile device.

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