使用Bootstrap实现图片添加文字及响应式布局问题求助

Hey there! Let's tackle your two main issues—getting text to sit properly on top of your images, and fixing the overlapping boxes when the screen shrinks. I've looked at your code and the reference effect you want, so here's a solution tailored to your needs:

问题分析 #

1. 文字定位失效：你的.bottom类用了margin:5em，这会把文字从图片区域推出去，而且没有正确利用绝对定位的bottom/left属性来固定位置。
2. 响应式重叠：固定了图片的宽高为250px × 200px，这会让图片在小屏幕上超出Bootstrap栅格列的宽度，导致盒子重叠；同时.box的display:inline-grid也和Bootstrap的栅格布局冲突。

修改后的完整代码 #

HTML（结构优化，增强响应式适配）

<div class="container-bg">
  <div class="container">
    <div class="products">
      <h1>PRODUCTS</h1>
      <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="box">
            <img src="img/red.png" class="img-responsive">
            <p class="bottom">PPE</p>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="box">
            <img src="img/green.png" class="img-responsive">
            <p class="bottom">FOOTWEAR</p>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="box">
            <img src="img/blue.png" class="img-responsive">
            <p class="bottom">CLOTHING</p>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="box">
            <img src="img/black.png" class="img-responsive">
            <p class="bottom">RAIL TOOLS</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS（核心调整，解决定位与响应式问题）

/* 盒子基础样式，确保相对定位作为文字的定位容器 */
.box {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 8px; /* 可选，和参考图的圆角效果匹配 */
  margin-bottom: 20px; /* 小屏幕下增加间距，避免拥挤 */
}

/* 图片自适应容器，保持比例，消除底部空白 */
.box img {
  width: 100%;
  height: auto;
  display: block;
}

/* 文字绝对定位在图片底部居中 */
.bottom {
  position: absolute;
  bottom: 15px; /* 调整距离底部的距离，适配需求 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中，兼容各种屏幕 */
  margin: 0; /* 清除默认margin，避免偏移 */
  padding: 5px 15px;
  background-color: rgba(0, 0, 0, 0.6); /* 添加半透明背景，提升文字可读性 */
  border-radius: 4px;
  font-weight: bold;
}

关键修改说明 #

• 响应式优化：给栅格列添加了col-sm-6和col-xs-12，确保平板（sm）每行显示2个盒子，手机（xs）每行显示1个，彻底解决重叠问题；图片用width:100%自适应容器宽度，不再固定尺寸。
• 文字定位修复：去掉了margin:5em，用left:50%+transform:translateX(-50%)实现文字水平居中，bottom:15px固定在图片底部；添加半透明背景让文字在任何图片上都清晰可见。
• 布局兼容性：移除了display:inline-grid，让Bootstrap的栅格系统正常控制盒子的排列，避免布局冲突。

这样修改后，文字会完美叠加在图片底部，并且屏幕缩小的时候盒子会自动换行，不会再重叠啦！

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