为何添加img-fluid类的图片仍超出Bootstrap 4网格？

我来帮你拆解下图片溢出容器的核心原因，以及对应的修复方案：

核心问题分析 #

1. 违反Bootstrap网格嵌套规则 #

Bootstrap 4的网格系统有严格的层级要求：.col必须是.row的直接子元素。看你的代码，在.col blue-bg-outter内部直接放置了另一个.col blue-bg，没有用.row包裹，这会彻底打乱Bootstrap的宽度计算逻辑——图片所在的中间列无法正确获取分配的宽度空间，自然会溢出容器。

2. 自定义CSS干扰了img-fluid的默认行为 #

你给.img-fluid设置了max-height: 100vh;，但没有明确保留img-fluid默认的max-width: 100%;属性（虽然默认自带，但如果CSS优先级冲突可能失效），这也会导致图片宽度不受容器限制。

修复后的完整代码 #

HTML #

<div class="row">
  <div class="col blue-bg-outter">
    <!-- 移除多余的.col类，将blue-bg改为普通内容容器 -->
    <div class="blue-bg" style="height: 300px;">
      <!-- 添加h-100让行占满容器高度，align-items-center实现垂直居中 -->
      <div class="row h-100 align-items-center">
        <div class="col">
          <h2>Some line</h2>
        </div>
        <div class="col img-col">
          <img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
        </div>
        <div class="col">
          <h2>Another line</h2>
        </div>
      </div>
    </div>
  </div>
</div>

CSS #

/* 明确保留img-fluid的核心约束，同时限制高度适应容器 */
.img-fluid {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

.blue-bg-outter {
  padding: 60px;
}

.blue-bg {
  background: #3ad7f7;
}

修复说明 #

1. 修正网格结构：移除.blue-bg上的.col类，让它作为普通内容容器存在，确保内部的.row和.col遵循Bootstrap的嵌套规则，这样中间列的宽度会被正确计算，图片就能被限制在列内。
2. 优化图片样式：明确设置max-width: 100%;保证图片宽度不超出容器，max-height: 100%;让图片高度适应300px的容器，height: auto;维持图片的宽高比。
3. 提升布局体验：添加h-100和align-items-center让内容垂直居中，视觉效果更协调。

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