bootstrap 5 中用 row + col 实现图片并排不换行，需将图片分别置于 内并包裹在 中，确保总列数≤12、去除html空格、添加 img-fluid 防溢出，且使用无断点前缀的 col-* 类（如 col-6）以保证所有屏幕尺寸下均生效。

用 Bootstrap 5 的 row + col 实现图片并排不换行

默认情况下，<img> 是内联元素，但直接放两个在一行容易受空格、换行符或父容器宽度影响而意外折行。Bootstrap 5 的栅格系统是最稳的解法，前提是正确使用容器嵌套层级。

关键不是“让图片不换行”，而是“让它们各自占据固定比例宽度、且总和 ≤12 列”，同时避免父容器触发响应式断点收缩。

• 必须包裹在 <div class="row"> 内，否则 <code>col 类无意义
• 两个图片建议用 col-6（各占 50%），或 col-4 + col-8 等组合，确保 sum ≤ 12
• 去掉图片间的换行/空格（HTML 中的空白符会被渲染为一个空格，可能挤占宽度）—— 直接写成 <div class="col-6"><img...></img...></div> <div class="col-6"><img...></img...></div> 连写
• 如果图片本身尺寸过大，会撑开列宽导致换行，加 img-fluid 类强制响应式缩放

为什么 float 或 inline-block 在 Bootstrap 5 里不推荐

Bootstrap 5 已移除对 float 工具类（如 float-start）的默认支持，也不再提供 inline-block 相关类。强行用这些会和栅格系统的 Flex 布局冲突，尤其在小屏幕下容易错位或溢出。


Bootstrap
Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。
下载

更实际的问题是：手动设置 display: inline-block 后，图片间 HTML 换行仍会产生空隙；而 float 需要额外清除浮动，且无法响应式对齐。

• Bootstrap 5 默认用 Flexbox 渲染 row，col 是 flex item，天然支持等高、对齐、间距控制
• 想加间隙？用 g-2、g-3 等栅格间距工具类，别用 margin 手动调
• 如果必须用非栅格方式（比如嵌入富文本），至少加 style="vertical-align: top;" 防止基线对齐导致底部空隙

img-fluid 不加会怎样？

不加 img-fluid 时，图片按原始像素宽高渲染。一旦图片宽度超过所在 col 容器（比如一张 1200px 宽图放进 col-6），就会横向溢出、触发父容器滚动，甚至把第二张图顶到下一行——这常被误认为是“换行”，其实是溢出后布局崩塌。

• img-fluid 等价于 max-width: 100%; height: auto;，保证图片不突破列宽
• 如果需要等比例缩放但保持高度一致（比如卡片图），得额外加 object-fit: cover; 和固定 height
• 注意：SVG 图片默认不响应 max-width，需显式设 width: 100%

响应式场景下两张图突然堆叠了？检查断点类

如果你用了 col-sm-6 却发现手机上还是并排，而换成 col-md-6 就堆叠了，说明你没理解断点含义：col-sm-6 表示「≥576px 屏幕才启用 6 列」，小于该宽度会退化为全宽（即堆叠）。真正想要「所有尺寸都并排」，就该用 col-6（无前缀 = 超小屏起生效）。

• col-*：所有尺寸（xs）
• col-sm-*：≥576px（sm）起生效，更小尺寸下为 col-12（默认）
• 常见误操作：写了 col-md-6 却没配更小断点，结果在 iPad 竖屏（768px）正常，但在 iPhone（375px）堆叠
Bootstrap 的栅格不是黑盒，它依赖正确的 HTML 结构、合理的类组合、以及对响应式断点的明确预期。漏掉一个 row，或混淆 col 断点前缀，都可能让两张图在某个设备上安静地换行——而且很难一眼看出原因。