Bootstrap容器内两列布局如何让右侧列突破容器延伸至浏览器右边缘

实现方案 #

默认Bootstrap的.container会设置固定最大宽度和左右内边距，因此内部元素无法超出容器边界，可通过CSS动态计算的负外边距实现右列背景突破容器的效果，具体步骤如下：

1. 添加自定义CSS规则

仅在大屏（lg断点及以上）生效，避免小屏出现横向滚动条：

/* 适配Bootstrap lg断点 ≥992px */
@media (min-width: 992px) {
  .bg-breakout-right {
    /* 负外边距将背景区域向右拉到视口右边缘 */
    margin-right: calc(-50vw + 50%);
    /* 内边距保证列内内容仍在原有网格区域内，不会跟着背景偏移 */
    padding-right: calc(50vw - 50%);
    /* 背景对齐配置 */
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

2. 修改HTML结构

给右列添加自定义类，同时可按需清除行间距避免偏移误差：

<div class="container">
  <div class="row g-0"> <!-- g-0清除默认列间距，保留间距可删除该类 -->
    <div class="col-sm-12 col-lg-6">
      <p>Example text</p>
    </div>
    <div class="col-sm-12 col-lg-6 bg-image bg-breakout-right" style="background-image:url('http://placehold.it/1800x1045');">
    </div>
  </div>
</div>

可选优化

如果你的项目使用Bootstrap 5且开启了CSS变量，可直接使用内置的断点变量替换媒体查询中的固定992px，后续调整Bootstrap断点时无需同步修改自定义CSS。

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