Bootstrap 5轮播图按钮链接异常：点击图片也跳转问题排查

我使用Bootstrap 5搭建网站，其中一个页面的头部是轮播图，图片上方叠加了文本和按钮。预期仅点击按钮时跳转至指定链接，但目前点击按钮或图片任意区域都会触发跳转。

原代码片段 #

CSS

body {
  background: hsl(233, 47%, 96%);
  font-family: 'Montserrat', sans-serif;
}

#copyright {
  border-top: 1px solid hsl(0, 0%, 20%);
}

.c-item {
  height: 900px;
}

.c-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

#team-img {
  height: 100%;
  object-fit: cover;
}

.dropdown:hover .dropdown-menu {
  display: block;
  background-color: hsl(196, 66%, 82%);
}

.dropdown-item:hover {
  background-color: hsl(198, 100%, 43%);
}

#button {
    background-color:hsl(208, 96%, 29%);
    border: 1px solid hsl(208, 96%, 29%);
}

#button:hover {
    background-color:hsl(198, 100%, 43%);
    border: 1px solid hsl(198, 100%, 43%);
}

#caption-h2 {
    text-shadow: 1px 1px 10px hsl(0, 0%, 0%);
    padding:1rem;
}

#caption-p {
    color: hsl(208, 96%, 29%);
}

HTML

<!-- SHOWCASE START -->
<section>
    <div id="herocarousel" class="carousel slide" data-bs-ride="carousel" >
          <div class="carousel-inner">
            <div class="carousel-item active c-item">
              <img src="./images/about001.jpg" class="d-block w-100 c-img" alt="...">
              <div class="carousel-caption mt-3 top-0 ">
                <p class="dtext-uppercase text-center" id="caption-p">We&nbsp;Are</p>
                <h2 class="display-3 fw-bolder text-capitalize" id="caption-h2">Project Name</h2>
                <div>
                    <a href="link">
                        <button class="btn btn-primary px-4 py-2 fs-5 mb-5" id="button">Book&nbsp;a&nbsp;Call</button>
                    </a>
                </div>      
            </div>  
        </div> 
    </div>
  </section>
  <!-- SHOWCASE CLOSE -->

问题原因 #

Bootstrap的carousel-caption默认采用绝对定位，且top/right/bottom/left均设为0，会占满整个轮播容器的宽高。你的<a>标签直接放在carousel-caption内部，没有限制点击范围，导致整个carousel-caption区域都成为了<a>的可点击区域，进而触发跳转。

解决方案 #

给包裹按钮的<div>添加d-inline-block类，让它仅占据按钮所需的空间，这样<a>的点击区域就会被限制在按钮周围：

修改后的HTML代码（按钮部分）

<div class="d-inline-block">
    <a href="link">
        <button class="btn btn-primary px-4 py-2 fs-5 mb-5" id="button">Book&nbsp;a&nbsp;Call</button>
    </a>
</div>

或者直接用<a>标签代替<button>（Bootstrap支持将<a>作为按钮使用），更简洁且点击范围自然限于按钮本身：

<a href="link" class="btn btn-primary px-4 py-2 fs-5 mb-5" id="button">Book&nbsp;a&nbsp;Call</a>

效果说明 #

添加d-inline-block类后，外层<div>会收缩到刚好包裹按钮的尺寸，<a>的可点击区域随之被限制在按钮范围内，点击轮播图其他区域时不会触发跳转。

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