使用Bootstrap搭建作品集站点时如何实现IB图片与对应文本并排展示？

问题原因 #

1. 未遵守Bootstrap栅格规则：row 元素必须嵌套在带有 container 或 container-fluid 类的父容器内才能正常触发栅格布局逻辑，你当前的 row 直接放在header标签下，栅格的宽度、对齐规则全部失效。
2. 样式权重冲突：你定义的 .ib 类权重低于全局的 header img 选择器，IB 图标被强制应用了 width:16%、min-width:200px、margin-top:30px、圆角等样式，图标尺寸远大于预期，挤压了同排文本的布局空间。
3. 缺少对齐规则：默认栅格列内容为顶部对齐，你未配置垂直居中规则，导致文本和图标视觉上没有对齐。

修复方案 #

第一步：修改CSS样式，覆盖全局图片规则

/* 提高选择器权重，覆盖header下全局img的样式 */
header img.ib {
  width: 80px; /* 可根据视觉需求调整尺寸 */
  min-width: unset;
  border-radius: 0; /* 若IB图标需要圆角可删除这行 */
  margin-top: 0;
}

第二步：修改HTML的栅格部分代码

<!-- 替换你原来的row相关代码 -->
<div class="container-fluid">
  <div class="row justify-content-center align-items-center g-3">
    <div class="col-auto">
      <img src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
    </div>
    <div class="col-auto">
      <h3> IB Student, 12.th Grade</h3>
    </div>
  </div>
</div>

效果说明 #

• 外层新增container-fluid后Bootstrap栅格会正常工作，适配不同屏幕尺寸
• col-auto 让列宽仅适配内容宽度，不会把两个元素拉到屏幕两端，布局更紧凑
• justify-content-center 让图标+文本的整体块在页面水平居中
• align-items-center 实现图标和文本的垂直居中对齐
• g-3 控制图标和文本之间的间距，可根据需求调整数值（g-0到g-5）

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