如何使用Bootstrap3实现Div与文本并排及高度响应文本？

嘿，我来帮你搞定这个需求！要把div当作图标放在文本旁，同时让它的高度自动匹配文本/排版高度，在Bootstrap3里可以用这两种简单实用的方法：

方法1：行内块级元素适配（适合单行/短文本） #

核心思路是让div和文本处于同一行流中，通过行内块属性实现高度自适应：

HTML结构 #

<p class="icon-text-wrap">
  <div class="custom-icon"></div>
  这是你的文本内容，字号、行高都可以灵活调整
</p>

CSS样式 #

.icon-text-wrap {
  line-height: 1.6; /* 匹配你的排版行高，确保文本垂直居中 */
}
.custom-icon {
  display: inline-block;
  vertical-align: middle; /* 和文本垂直对齐，避免错位 */
  width: 22px; /* 图标宽度按需修改 */
  background-color: #2c3e50; /* 示例背景，替换成你的图标样式 */
  margin-right: 10px; /* 图标与文本的间距 */
  /* 无需设置固定高度，div会自动继承父元素行高，完美匹配文本高度 */
  min-height: 1em; /* 空div时保证基础高度，可选 */
}

方法2：Bootstrap媒体对象（适合多行/复杂文本） #

Bootstrap自带的媒体对象组件天然支持侧边元素与主体内容高度一致，非常适合多行文本场景：

HTML结构 #

<div class="media">
  <div class="media-left">
    <div class="custom-icon"></div>
  </div>
  <div class="media-body">
    这里可以放多行文本，甚至嵌套其他排版元素
    <br>
    第二行文本示例，侧边图标会自动匹配整个文本块的高度
    <br>
    第三行继续延伸，高度同步无压力
  </div>
</div>

CSS样式 #

.custom-icon {
  width: 22px;
  background-color: #2c3e50;
  height: 100%; /* 让图标div填满左侧容器高度 */
}
.media-left {
  /* 覆盖Bootstrap默认浮动，改用表格布局实现高度自适应 */
  display: table-cell;
  vertical-align: top; /* 可选：顶部对齐，换成middle就是垂直居中 */
  padding-right: 10px; /* 图标与文本的间距 */
}
.media-body {
  display: table-cell;
  width: 10000px; /* 表格布局下让文本容器占满剩余宽度 */
}

关键注意事项 #

• 绝对不要给图标div设置固定height，否则会直接失去自适应能力；
• 用vertical-align属性确保图标和文本垂直对齐，避免视觉错位；
• 如果图标div内有内容（比如字体图标），记得让内容也继承行高或设置垂直居中，保持整体协调。

内容的提问来源于stack exchange，提问作者David Foie Gras