Bootstrap 3.3.7：如何让响应式图片在小屏幕中与文本并排显示

嘿，我先帮你揪出代码里的小语法错误——你把<p>标签误塞到style属性里了，而且max-width的值也没写完，这会导致浏览器解析样式直接出错，先把代码修正成正确结构：

<div class="col-sm-2 text-center">
  <img class="img-responsive center-block" src="img/1.png" style="max-width: 100px;"> <!-- 补上具体宽度值，比如100px -->
  <p>Some guarantee text here</p>
</div>

接下来解决核心问题：img-responsive类自带display: block，这会让图片独占一行，文本只能排在下方。要让小屏幕上两者并排，给你几个实用方案：

方案一：自定义类覆盖display属性（推荐，不破坏Bootstrap原有样式） #

创建一个自定义CSS类，优先级高于img-responsive，把图片改成inline-block，同时让文本和图片垂直对齐：

/* 放在自定义样式文件或<style>标签中 */
.img-inline-responsive {
  display: inline-block !important; /* 覆盖img-responsive的display:block */
  vertical-align: middle; /* 让图片和文本居中对齐 */
  max-width: 100%; /* 保留响应式特性 */
  height: auto;
}

修改后的HTML：

<div class="col-sm-2 text-center">
  <img class="img-responsive img-inline-responsive" src="img/1.png" style="max-width: 100px;">
  <p>Some guarantee text here</p>
</div>

不想用!important的话，可以把选择器写得更具体，比如.col-sm-2 .img-responsive，这样优先级会更高。

方案二：用Bootstrap栅格系统拆分布局 #

把图片和文本分别放在小屏幕的列中，让它们在xs（<768px）屏幕上自动并排：

<div class="row">
  <!-- 小屏幕上图片占6列，文本占6列，可按需调整比例 -->
  <div class="col-xs-6 col-sm-2 text-center">
    <img class="img-responsive center-block" src="img/1.png" style="max-width: 100px;">
  </div>
  <div class="col-xs-6 col-sm-10 text-center"> <!-- sm屏幕上文本占10列，和图片的2列凑满12格 -->
    <p>Some guarantee text here</p>
  </div>
</div>

这个方案完全利用Bootstrap原生栅格，不用额外写CSS，布局灵活性拉满。

方案三：使用Bootstrap Media组件 #

如果是小型图文搭配场景，Bootstrap的media组件天生适配这种并排布局，还自带垂直对齐特性：

<div class="media">
  <div class="media-left media-middle">
    <img class="media-object img-responsive" src="img/1.png" style="max-width: 100px;">
  </div>
  <div class="media-body media-middle">
    <p>Some guarantee text here</p>
  </div>
</div>

media-middle能让图片和文本自动垂直居中，非常适合这种轻量图文组合。

你可以根据自己的布局需求选一个方案，先把代码语法错误修正，再测试效果就好啦！

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