如何用Bootstrap 5实现左列对齐容器内边距、右列全屏的响应式两栏布局

需求说明 #

需要实现一种响应式布局：左侧内容列与常规容器的内边距对齐，右侧图片列直接延伸到浏览器滚动条边缘（全屏宽度），且在移动端自动切换为上下堆叠的常规布局。

你尝试的代码（修正语法问题后） #

<div class='container me-0'>
  <div class='row align-items-center'>
    <div class='col-md-5'>
      <h1>Application Development</h1>
      <p class='mb-0'>
        Craft innovative applications tailored to clients with latest programming techniques.
      </p>
    </div>
    <div class='col-md-7'>
      <img src='/assets/images/services1.png' alt='Contact' style="width: 100%"/>
    </div>
  </div>
</div>

解决方案 #

原代码的问题在于外层container限制了整体宽度，无法让右侧列突破容器范围。我们可以通过拆分布局结构+自定义CSS来实现需求：

完整实现代码

<div class="row g-0 align-items-center">
  <!-- 左侧内容：嵌套container保证内边距对齐 -->
  <div class="col-md-5">
    <div class="container">
      <h1>Application Development</h1>
      <p class='mb-0'>
        Craft innovative applications tailored to clients with latest programming techniques.
      </p>
    </div>
  </div>

  <!-- 右侧图片：自定义样式实现全屏宽度 -->
  <div class="col-md-7 full-width-right">
    <img src='/assets/images/services1.png' alt='Application Development' style="width: 100%; height: auto;" />
  </div>
</div>

<style>
/* 仅在中等屏幕及以上生效 */
@media (min-width: 768px) {
  .full-width-right {
    /* 计算右侧需要延伸的宽度，触达视口边缘 */
    width: calc(100vw - (100% - var(--bs-gutter-x)*.5));
    max-width: calc(100vw - (100% - var(--bs-gutter-x)*.5));
    margin-right: calc(var(--bs-gutter-x)*-.5);
  }
}
</style>

关键说明

1. 布局结构调整：移除外层container，改用row g-0消除列间距；左侧列内部嵌套container，确保内容和常规容器的内边距保持一致。
2. 自定义宽度计算：利用100vw（视口总宽度）减去左侧列占用的宽度，让右侧列直接延伸到浏览器边缘。
3. 响应式适配：通过媒体查询仅在md及以上屏幕应用全屏样式，移动端时右侧列自动占满宽度，切换为上下堆叠的常规布局。

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