Bootstrap实现三张图片在小分辨率下始终单列显示的方法

嘿，其实你要的效果Bootstrap栅格系统本身就支持，可能是代码结构没搭对，我给你一步步说清楚：

首先，Bootstrap的栅格布局必须遵循「container → row → col」的层级结构，你的原代码里少了row这个关键容器，这可能导致布局异常。

修正后的代码示例 #

<div class="container" style="padding-top:50px">
  <!-- 必须添加row容器，用来包裹列元素 -->
  <div class="row">
    <!-- 每个图片用col-md-4即可，小屏幕会自动单列 -->
    <div class="col-md-4">
      <a href="gasoline.aspx">
        <img src="https://s3.amazonaws.com/media.eremedia.com/uploads/2015/05/stackoverflow.png" height="120px" class="center-block img-fluid" />
      </a>
      <p class="text-center">这里放你的图片说明文本</p>
    </div>
    <div class="col-md-4">
      <!-- 第二张图片的内容结构同上 -->
    </div>
    <div class="col-md-4">
      <!-- 第三张图片的内容结构同上 -->
    </div>
  </div>
</div>

为什么这样能生效？ #

• col-md-4的含义是：在中等屏幕（宽度≥768px）及以上，每个列占据12栅格中的4份，3个列刚好填满一行；而在中等屏幕以下（宽度<768px），这个类会自动让列占满12份宽度，也就是自动变成单列显示，完全符合你的需求。
• 如果想更明确地指定小屏幕的行为（语义更清晰），可以把类写成col-12 col-md-4（适用于Bootstrap 4及以上版本），效果和单独用col-md-4完全一致，但能直观看到小屏幕下的布局规则。

额外小建议 #

• 去掉图片上的width="200px"属性，因为img-fluid已经会让图片自适应容器宽度，固定宽度会影响小屏幕下的适配效果。
• 确保你引入的是对应版本的Bootstrap CSS，如果是Bootstrap 3，小屏幕的类是col-xs-12，搭配col-md-4写成col-xs-12 col-md-4即可。

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