使用Bootstrap如何让文字固定在图片下方且适配响应式布局

你当前文字显示在图片侧边的核心原因是，给每个列元素设置的d-flex类默认是水平弹性布局，同级的img和p标签会自动在同一行排列。之前你用absolute定位出现响应式偏移，是因为absolute定位是相对于最近的非static定位父元素定位，没有和图片绑定相对位置，父元素尺寸变化时自然会错位。

最优解决方法（无需额外写自定义CSS，直接用Bootstrap自带工具类即可）

给所有包含图片和文字的col-lg-2、col-lg-2 col-half-offset元素，新增flex-column类，将弹性布局的主轴改为垂直方向，元素就会自动从上到下排列，文字自然显示在图片正下方，完全适配响应式不会偏移。
修改后的列代码示例：

<!-- 修改前的列结构 -->
<div class="col-lg-2 d-flex align-items-center justify-content-center">
  <img src="assets/img/aplikasi/01.png" class="img-fluid" alt="">
  <p class="sub">Jual Sampah</p>
</div>

<!-- 修改后的列结构，仅新增flex-column类 -->
<div class="col-lg-2 d-flex flex-column align-items-center justify-content-center">
  <img src="assets/img/aplikasi/01.png" class="img-fluid" alt="">
  <p class="sub">Jual Sampah</p>
</div>

所有列都按照上述逻辑修改即可。

可选优化

如果需要调整图片和文字的间距，可以给p.sub元素新增Bootstrap自带的外边距工具类，比如mt-2就是给文字上方加2个单位的间距，无需修改自定义CSS。

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