Bootstrap栅格列内图片下方按钮对齐布局问题求解

问题根源 #

当前布局错位由Bootstrap默认样式特性导致：

• 无宽度约束的.col类作为弹性项，默认会被拉伸为等高，列宽自动占满行内剩余空间，没有和内部内容宽度绑定
• <img>默认为行内元素，存在默认基线底部间隙，且未做块级约束
• 列容器未设置纵向排布规则，内部图片、按钮按默认行内流排布，无法保证上下居中对齐

修复步骤 #

• 替换列类名：将所有列的.col替换为.col-auto，让列宽自动匹配内部内容宽度，不再自动拉伸占满剩余空间；同时给列添加Bootstrap弹性布局工具类d-flex flex-column align-items-center，强制列内元素纵向排列、水平居中。
• 修正图片样式：给预览图添加d-block类将其转为块级元素，消除行内元素默认底部间隙，再加mb-2类和下方按钮保留固定间距。
• 优化按钮样式：移除按钮上硬编码的style="width:135px"，替换为w-100类，让按钮宽度自动和上方图片宽度100%匹配，后续调整图片尺寸时无需同步修改按钮宽度。

修复后完整代码 #

<div class="row g-3">
  <div class="col-auto d-flex flex-column align-items-center">
    <input id="InputFile1" type="file" accept="image/*" onchange="loadFile(event, 'output1', 'spanIMG1')" hidden>
    <img id="output1" class="d-block mb-2" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
    <a class="btn btn-info w-100" href="javascript:{}">First Image</a>
  </div>
  <div class="col-auto d-flex flex-column align-items-center">
    <input id="InputFile2" type="file" accept="image/*" onchange="loadFile(event, 'output2', 'spanIMG2')" hidden>
    <img id="output2" class="d-block mb-2" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
    <a class="btn btn-info w-100" href="javascript:{}">Second Image</a>
  </div>
  <div class="col-auto d-flex flex-column align-items-center">
    <input id="InputFile3" type="file" accept="image/*" onchange="loadFile(event, 'output3', 'spanIMG3')" hidden>
    <img id="output3" class="d-block mb-2" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
    <a class="btn btn-info w-100" href="javascript:{}">Third Image</a>
  </div>
</div>

额外优化：给外层.row添加g-3类，为列之间增加统一间距，避免不同屏幕下列元素挤在一起。

效果说明 #

修复后所有按钮会自动对齐到对应预览图的正下方，和图片同宽、水平居中，即使后续上传不同比例的预览图（只要保持固定135px宽高），按钮位置也不会偏移，同时小屏幕下会自动换行适配移动端。

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