如何在Bootstrap轮播图每张图片底部添加链接？

Got it, let's fix this up. You want links attached to each carousel slide without covering the image itself—smart move for keeping your content accessible and visually clean. Here's how to structure your Bootstrap carousel so links sit below each image, not on top:

Key Tweaks to Your Code #

• Bundle each image and its corresponding link inside the same .carousel-item
• Use a dedicated container for the link (we'll leverage Bootstrap utility classes to position it nicely)
• Ensure the link container stays visible everywhere (default carousel captions hide on small screens, so we'll override that)

Full Working Code Snippet #

<div class="container">
  <!-- Replaced inline margin styles with Bootstrap utility classes for responsiveness -->
  <h1 class="text-center mb-5">Projects</h1>
  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <!-- Slide 1 -->
      <div class="carousel-item active">
        <img src="your-project-1.jpg" class="d-block w-100" alt="Project 1">
        <!-- Link container positioned below the image -->
        <div class="carousel-caption d-block text-center mt-3">
          <a href="project-1-details.html" class="btn btn-primary">View Project 1</a>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item">
        <img src="your-project-2.jpg" class="d-block w-100" alt="Project 2">
        <div class="carousel-caption d-block text-center mt-3">
          <a href="project-2-details.html" class="btn btn-primary">View Project 2</a>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item">
        <img src="your-project-3.jpg" class="d-block w-100" alt="Project 3">
        <div class="carousel-caption d-block text-center mt-3">
          <a href="project-3-details.html" class="btn btn-primary">View Project 3</a>
        </div>
      </div>
    </div>

    <!-- Carousel Controls -->
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Quick Tips #

• The text-center class on the heading replaces your inline margin-left and works on all screen sizes (no more fixed positioning issues)
• d-block on the caption ensures it never hides, even on mobile devices
• mt-3 adds a small gap between the image and link to avoid cramped layout
• Swap btn btn-primary with other Bootstrap button classes (like btn btn-outline-dark) or add custom CSS to match your project's style

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