响应式设计中Grid系统使用问题：图文无法横向排列排查

看起来你遇到的是Bootstrap栅格布局未正常生效的典型问题——明明col-3+col-9凑够了12列，却没有实现并排显示，我来帮你梳理几个最可能的原因和解决办法：

1. 最常见诱因：未正确引入Bootstrap CSS #

Bootstrap的栅格系统完全依赖自带的CSS样式，如果页面里没有加载Bootstrap的CSS文件，col-*类就只是个普通标识，不会触发栅格的弹性/浮动布局规则，自然会默认上下堆叠。

解决办法：
在页面的<head>标签里加入Bootstrap的CSS引用（可以用CDN或本地文件）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

（如果使用Bootstrap 4，记得替换为对应版本的CDN链接）

2. 图片宽度撑破了col-3容器 #

如果你的图片原始尺寸远大于col-3在当前屏幕下的可用宽度，会把容器撑得超出预期，导致col-9没有足够空间并排，只能被挤到下一行。

解决办法：
给图片添加Bootstrap的img-fluid类，让图片自适应容器宽度：

<img src="..." alt="" class="img-fluid">

3. 自定义CSS干扰了栅格布局 #

如果项目里有自定义CSS，不小心覆盖了Bootstrap栅格的核心属性（比如给.col-*加了display: block、float: none，或者修改了flex相关规则），也会直接破坏布局逻辑。

解决办法：
暂时注释掉针对.row或.col-*的自定义样式，测试布局是否恢复正常，找到冲突代码后调整样式优先级或修改规则。

修正后的完整代码示例 #

结合上面的优化点，你的代码可以调整为：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <img src="..." alt="" class="img-fluid">
      </div>
      <div class="col-9">
        <h3>Headline 1</h3>
        <p>Lorem ipsum dolor sit amet, ... </p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <img src="..." alt="" class="img-fluid">
      </div>
      <div class="col-9">
        <h3>Headline 2</h3>
        <p>Lorem ipsum dolor sit amet, ... </p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <img src="..." alt="" class="img-fluid">
      </div>
      <div class="col-9">
        <h3>Headline 3</h3>
        <p>Lorem ipsum dolor sit amet, ... </p>
      </div>
    </div>
  </div>
</div>

额外提示 #

如果使用Bootstrap 5，栅格基于Flexbox实现，要确保你的.row没有被设置为flex-direction: column，否则子元素会强制上下排列。

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie ...