如何在Bootstrap 3模态框内创建网格实现图标与文字并排布局

无需复杂定位调整，采用Flex弹性布局即可稳定实现目标并排效果，方案对入门开发者友好，维护成本低。

推荐HTML结构 #

把每一组图标、对应的文本放在同一个父容器下，避免跨层级布局错位：

<!-- 模态框内容区的图文列表 -->
<div class="modal-content">
  <!-- 单条图文模块 -->
  <div class="info-item">
    <span class="info-item__icon">
      <!-- 这里替换为你实际使用的图标：支持img、svg、字体图标任意形式 -->
    </span>
    <div class="info-item__text-wrap">
      <h3>对应模块的标题文本</h3>
      <p>对应模块的描述说明文本</p>
    </div>
  </div>

  <!-- 其余图文模块复用上述结构即可 -->
  <div class="info-item">
    <span class="info-item__icon"></span>
    <div class="info-item__text-wrap"></div>
  </div>
</div>

配套核心CSS #

这段样式是实现并排对齐的关键，不需要反复调定位参数：

/* 单条图文模块的布局控制 */
.info-item {
  /* 开启弹性布局，让内部元素沿横向排列 */
  display: flex;
  /* 让图标和文本在垂直方向居中对齐，不会上下错位 */
  align-items: center;
  /* 统一设置图标和文本之间的间距，比手动加margin好维护 */
  gap: 16px;
  /* 给每条信息加底部间距，拉开条目之间的距离 */
  margin-bottom: 24px;
}

/* 图标样式 */
.info-item__icon {
  /* 固定图标容器尺寸，避免内容挤压变形 */
  width: 28px;
  height: 28px;
  /* 图标自身内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 禁止图标被文本区域压缩，保持固定大小 */
  flex-shrink: 0;
}

/* 文本区域样式 */
.info-item__text-wrap {
  /* 让文本占满剩余横向空间，保持排版整齐 */
  flex: 1;
}

/* 清除文本默认边距，避免布局错位 */
.info-item__text-wrap h3,
.info-item__text-wrap p {
  margin: 0;
  line-height: 1.6;
}

常见调整无效的避坑点 #

• 不要把图标和文本拆分到两个独立的父容器中，跨层级的元素无法通过弹性布局实现稳定对齐
• 不要依赖绝对定位手动调整图标位置，这类写法在不同屏幕尺寸下很容易出现错位
• 不要忘记给图标容器加flex-shrink: 0，不然窄屏下图标会被挤压变形
• 不要用浮动实现并排，浮动元素后续清理不及时很容易带塌整个布局

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