Bootstrap 5实现中分布局：左满宽图+右1400px容器文本

你需要的布局核心是让图片突破container的约束铺满左半屏，同时右侧文本被限制在居中的1400px容器内，原来的结构问题在于把图片放在了container内部，导致无法超出容器范围。以下是最优实现方式：

核心思路 #

用全屏flex容器做外层拆分：

• 左侧占页面50%宽度，直接放图片并铺满该区域
• 右侧占页面50%宽度，内部嵌套container，让文本内容被限制在1400px居中容器内

完整代码实现 #

<!-- 外层全屏flex容器，可选垂直居中 -->
<div class="min-vh-100 d-flex align-items-center">
  <!-- 左侧图片区域：占50%宽度，无内边距 -->
  <div class="w-50 p-0">
    <img src="你的图片地址" alt="左侧图片" class="h-100 w-100 object-fit-cover">
  </div>
  <!-- 右侧文本区域：占50%宽度，内部嵌套container -->
  <div class="w-50">
    <div class="container">
      <div class="row">
        <div class="col">
          <h2>标题内容</h2>
          <p>这里是被限制在1400px容器内的文本内容，不会超出容器范围，同时整体位于页面右半部分。</p>
          <!-- 更多文本元素 -->
        </div>
      </div>
    </div>
  </div>
</div>

关键细节说明 #

• w-50：Bootstrap内置类，设置元素宽度为50%，实现左右各占半屏的拆分
• object-fit-cover：确保图片铺满容器且比例不变，避免拉伸变形
• min-vh-100 + align-items-center：实现内容垂直居中（如果不需要垂直居中可以去掉这两个类）
• 右侧的container会自动保持1400px宽度居中，内部文本自然被限制在该范围内，不会超出页面中线

样式调整（可选） #

如果不需要图片全屏高度，可以去掉h-100，给图片容器设置固定高度，比如h-75或者自定义CSS高度。

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