在Bootstrap网格中实现响应式图文布局：图片比例与列换行问题

嘿，我来帮你搞定这两个头疼的布局问题！咱们一个一个来解决：

一、让图片保持固定宽高比且响应式不超出网格 #

你之前尝试固定列宽或图片尺寸没用，是因为Bootstrap的栅格列是弹性布局，直接硬设尺寸会和栅格的响应式规则冲突。这里有个靠谱的方法，用容器+绝对定位来锁住宽高比，配合Bootstrap自带的img-fluid类实现响应式：

步骤1：给图片加一个比例容器 #

先给每个图片所在的列套一个容器，用来控制比例：

<div class="col-sm-1">
  <div class="aspect-ratio-box">
    <img src="你的图片地址.jpg" class="img-fluid" alt="图片描述">
  </div>
</div>

步骤2：写CSS固定宽高比 #

通过padding-top的百分比（基于父元素宽度）来实现固定比例，再用绝对定位让图片填满容器：

.aspect-ratio-box {
  position: relative;
  width: 100%;
  /* 这里的百分比决定宽高比：100%是1:1，75%是4:3，56.25%是16:9，按需调整 */
  padding-top: 100%; 
  overflow: hidden;
}

.aspect-ratio-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 可选：object-fit控制图片显示方式 */
  object-fit: cover; /* 裁剪多余部分，保持比例不拉伸 */
  /* object-fit: contain; 完整显示图片，可能留空白 */
}

这样不管屏幕怎么缩，图片都会跟着列的宽度按比例缩放，绝对不会超出栅格范围！

二、控制列的换行触发尺寸 #

Bootstrap 4的栅格是基于预设断点的：sm(576px)、md(768px)、lg(992px)、xl(1200px)。你现在用的col-sm-*意味着屏幕宽度小于576px时会换行。如果要改变触发换行的尺寸，有两种方法：

方法1：用Bootstrap自带的断点类调整 #

如果你想让列在更大的屏幕（比如768px，md断点）才换行，直接把col-sm-*改成col-md-*就行。比如：

<div class="col-md-2"></div>
<div class="col-md-1">...</div>

这样只有当屏幕宽度小于768px时，列才会换行。

方法2：自定义换行断点（更灵活） #

如果预设断点不符合需求，比如想在600px时换行，就写自定义媒体查询覆盖栅格的flex属性：

/* 自定义断点：屏幕宽度≤600px时，所有列占满一行 */
@media (max-width: 600px) {
  .row > [class^="col-"] {
    flex-basis: 100%;
    max-width: 100%;
  }
}

把这段CSS加上，就能让所有列在600px时自动换行，完全按你的需求来！

整合后的完整代码示例 #

把上面的方案整合到你的原有代码里，最终效果如下：

<!-- 第一行：图片行 -->
<div class="row">
  <div class="col-sm-2"></div>
  <div class="col-sm-1">
    <div class="aspect-ratio-box">
      <img src="image1.jpg" class="img-fluid" alt="图片1">
    </div>
  </div>
  <div class="col-sm-1">
    <div class="aspect-ratio-box">
      <img src="image2.jpg" class="img-fluid" alt="图片2">
    </div>
  </div>
  <div class="col-sm-8"></div>
</div>

<!-- 第二行：标题文本行 -->
<div class="row">
  <div class="col-sm-2"></div>
  <div class="col-sm-1"></div>
  <div class="col-sm-5">
    <div class="row">Title Text goes here</div>
    <div class="row">More text goes here</div>
  </div>
  <div class="col-sm-4"></div>
</div>

对应的CSS：

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1比例，可按需修改 */
  overflow: hidden;
}

.aspect-ratio-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 自定义换行断点示例：600px时换行 */
@media (max-width: 600px) {
  .row > [class^="col-"] {
    flex-basis: 100%;
    max-width: 100%;
  }
}

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