Bootstrap网格右侧边距问题：绝对定位文本覆盖层溢出列框架

这个问题的核心是绝对定位元素的参照父级设置和边界约束没做好，我给你一步步捋清楚解决方案：

1. 先给父容器设置相对定位 #

Bootstrap的col-*列默认是position: static（默认定位规则），绝对定位的子元素会直接跳过它，去找上层有定位属性的父级。所以你需要给包含图片和覆盖层的容器（可以是列本身，也可以是列内部的一个独立div）加上position: relative，这样覆盖层就会以这个容器为参照来定位，不会乱跑。

2. 约束覆盖层的左右边界 #

给你的透明文本覆盖层设置left: 0; right: 0;，这样它的左右两边会完全贴合父容器的边界，再也不会超出列的框架。如果需要和图片边缘完全对齐，还要注意Bootstrap列默认带的左右padding——要是想忽略这个padding，可以把图片和覆盖层放在一个内部div里，给这个div加width: 100%; position: relative;，同时把padding设为0。

完整代码示例 #

HTML结构 #

<div class="row">
  <div class="col-md-6">
    <!-- 内部容器，作为覆盖层的定位参照 -->
    <div class="img-wrapper">
      <img src="your-image-path.jpg" class="img-fluid" alt="展示图片">
      <!-- 透明文本覆盖层 -->
      <div class="text-overlay">
        这里是你的透明覆盖文本内容
      </div>
    </div>
  </div>
</div>

CSS样式 #

.img-wrapper {
  position: relative;
  /* 若要忽略Bootstrap列的默认padding，就加上下面这行 */
  /* padding: 0; */
}

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

.text-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* 可根据需求调整垂直位置，比如改成top:0 */
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 1.2rem;
}

额外小提示 #

• 除了left:0; right:0，也可以用width: 100%;来约束宽度，但前者的适配性更好，能自动跟随父容器的宽度变化，完美贴合边界。
• 如果你的覆盖层需要和图片边缘完全对齐，记得把img-wrapper的padding设为0，不然会受到Bootstrap列默认padding的影响，出现留白。

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