Bootstrap 4图片与标题响应式布局异常问题求助

核心问题分析 #

原布局未确保两个Div在空间不足时维持横向排列，同时标题容器缺少强制换行属性，导致要么标题不换行撑爆容器，要么容器宽度不足时直接换行到图片下方。

解决方案1：使用Flexbox布局（推荐） #

Flexbox是现代布局的最优方案，能轻松实现弹性并排布局，同时支持子元素的换行调整。

修改后的代码示例 #

HTML

<div class="container">
  <div class="image-box">
    <img src="your-image.jpg" alt="图片" width="130" height="130">
  </div>
  <div class="title-box">
    <h2>这里是需要换行的长标题内容，比如非常长的产品名称或者文章标题</h2>
  </div>
</div>

CSS

/* 父容器设置为flex布局，确保子元素并排 */
.container {
  display: flex;
  align-items: center; /* 垂直居中对齐，可选 */
  gap: 16px; /* 图片和标题之间的间距，可选 */
  flex-wrap: nowrap; /* 强制子元素不换行，保持并排 */
}

.image-box {
  flex-shrink: 0; /* 图片容器不缩小，保持130px宽度 */
}

.title-box {
  flex: 1; /* 标题容器占据剩余可用空间 */
  white-space: normal; /* 允许标题换行 */
  word-wrap: break-word; /* 长单词自动换行，防止撑爆容器 */
}

/* 媒体查询调整字体大小 */
@media (max-width: 768px) {
  .title-box h2 {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .title-box h2 {
    font-size: 1rem;
  }
}

代码说明 #

• display: flex：将父容器设为弹性布局，子元素默认横向排列
• flex-shrink: 0：确保图片容器不会因空间不足被压缩，维持130px固定尺寸
• flex: 1：让标题容器自动填充剩余空间，即使标题换行也不会挤占图片空间
• white-space: normal 和 word-wrap: break-word：强制标题内容在容器宽度不足时自动换行，避免撑爆布局

解决方案2：传统Float布局（兼容旧浏览器） #

如果需要兼容不支持Flexbox的旧浏览器，可采用Float布局，需额外处理浮动清除：

修改后的代码示例 #

CSS

.container {
  overflow: hidden; /* 清除浮动，防止父容器高度塌陷 */
  width: 100%;
}

.image-box {
  float: left;
  width: 130px;
  margin-right: 16px;
}

.title-box {
  overflow: hidden; /* 触发BFC，让标题容器占据剩余空间，不被图片挤到下方 */
  white-space: normal;
  word-wrap: break-word;
}

/* 媒体查询部分保持不变 */
@media (max-width: 768px) {
  .title-box h2 {
    font-size: 1.2rem;
  }
}

代码说明 #

• float: left：让图片容器左浮动
• overflow: hidden：给标题容器触发BFC（块级格式化上下文），使其自动填充剩余空间，避免因图片浮动换行到下方
• 同样通过white-space和word-wrap确保标题换行

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