如何让Bootstrap容器内的子DIV铺满全屏宽度？

针对你在Bootstrap container 内放置全屏宽度元素的需求，以下是几种适配所有屏幕的可靠方案：

方案一：负margin + calc（推荐，随页面滚动） #

这个方法能让元素完美延伸至屏幕边缘，同时避免横向滚动条，适配所有断点：

首先确保父容器 container 开启相对定位（让子元素的绝对定位基于它）：

.container {
  position: relative;
}

然后给全屏元素设置样式：

.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  /* 核心：通过负margin让元素左右延伸至屏幕边缘 */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  z-index: 0;
  background: linear-gradient(134deg, #7FA5FF 0%, #D0E6FE 100%);
}

原理：calc(-50vw + 50%) 计算的是「视口一半宽度」与「父容器（container）一半宽度」的差值，通过负margin让元素的左右边缘刚好对齐屏幕两侧，同时不会超出视口范围。

方案二：固定定位（不随页面滚动） #

如果你的全屏元素不需要随页面滚动，可以使用固定定位：

.fullscreen {
  position: fixed;
  inset: 0; /* 等价于top:0; right:0; bottom:0; left:0; */
  z-index: 0;
  background: linear-gradient(134deg, #7FA5FF 0%, #D0E6FE 100%);
}

这个方法简单直接，但元素会固定在视口内，不会跟随页面滚动。

方案三：调整DOM结构（可选） #

如果允许修改HTML结构，你可以把全屏元素从 container 中移出，单独使用块级元素即可：

<div class="container">
  <!-- 其他内容 -->
</div>
<div class="fullscreen"></div>
<div class="container">
  <!-- 其他内容 -->
</div>

对应的CSS只需设置基础样式：

.fullscreen {
  width: 100%;
  height: 100%;
  background: linear-gradient(134deg, #7FA5FF 0%, #D0E6FE 100%);
}

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