如果你不想改变代码结构，我们可以调整覆盖css。希望这能有所帮助。：）
我们可以在bootstrap中使用gutters大小。
--bs-gutter-x位于Bootstrap 5 Base中，您可以在**bootstrap.css**中找到它。
您可以找到using CSS custom properties和how we can use it with var() function。
下面是代码：

.slider-img {
  position: relative;
}

.img-fluid {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  width: calc(100% - var(--bs-gutter-x));
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  margin-left: calc(var(--bs-gutter-x) * .5);
}

.slider-img:hover .overlay {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="banner">
  <div class="container">
    <div class="row">
      <div class="col-4 slider-img">
        <img src="https://via.placeholder.com/600" class="img-fluid h-100" alt="Latest Hindi Status">
        <div class="overlay">My Name is John</div>
      </div>

      <div class="col-4 slider-img">
        <img src="https://via.placeholder.com/600" class="img-fluid h-100" alt="Latest Hindi Status">
        <div class="overlay">My Name is John</div>
      </div>

      <div class="col-4 slider-img">
        <img src="https://via.placeholder.com/600" class="img-fluid h-100" alt="Latest Hindi Status">
        <div class="overlay">My Name is John</div>
      </div>
    </div>
  </div>
</div>

问题是绝对定位的元素不知道父列上的填充。
一般来说，最好不要把你的内容和你的网格纠缠在一起。把你的内容放在网格内。你也可以对覆盖层应用大小调整，但这最终会更简单。
其他提示：

• Bootstrap有一个类用于相对定位。不需要自己编写。
• 覆盖核心Bootstrap类（如img-fluid）是不明智的，请添加一个自定义类。

.overlay-image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.overlay-box:hover .overlay {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="banner">
  <div class="container">
    <div class="row">
      <div class="col-4">
        <div class="position-relative overlay-box">
          <img src="https://via.placeholder.com/600" class="img-fluid overlay-image h-100" alt="Latest Hindi Status">
          <div class="overlay">My Name is John</div>
        </div>
      </div>

      <div class="col-4">
        <div class="position-relative overlay-box">
          <img src="https://via.placeholder.com/600" class="img-fluid overlay-image h-100" alt="Latest Hindi Status">
          <div class="overlay">My Name is John</div>
        </div>
      </div>

      <div class="col-4">
        <div class="position-relative overlay-box">
          <img src="https://via.placeholder.com/600" class="img-fluid overlay-image h-100" alt="Latest Hindi Status">
          <div class="overlay">My Name is John</div>
        </div>
      </div>
    </div>
  </div>
</div>