Bootstrap容器行布局实现：绝对定位背景占满视口，其余元素并排

需求回顾 #

• 将#particles-js设为绝对定位，宽度占满整个视口（100vw），作为容器背景
• 两个带slider-content类的col元素保持在container宽度范围内并排显示

代码调整方案 #

1. HTML结构（无需改动层级）

保留原元素嵌套结构即可：

<div class="container">
  <div class="row d-flex align-items-center">
    <div id="particles-js"></div>
    <div class="col-md-7 col-lg-6 slider-content"></div>
    <div class="col-md-5 col-lg-6 text-end slider-content"></div>
  </div>
</div>

2. CSS样式调整

核心是修正定位参考和背景元素的位置规则：

/* 给row设置相对定位，作为particles-js的定位基准 */
.row {
  position: relative;
  /* 确保行有足够高度，可根据实际内容调整数值 */
  min-height: 500px;
}

#particles-js {
  position: absolute;
  width: 100vw;
  height: 100%;
  /* 让背景元素突破container限制，水平居中占满视口 */
  left: 50%;
  transform: translateX(-50%);
  /* 将背景置于内容下方，避免遮挡 */
  z-index: -1;
}

/* 可选：给内容列添加样式，方便区分层级（按需调整） */
.slider-content {
  background-color: rgba(255,255,255,0.8);
  padding: 2rem;
}

调整说明 #

• 给row加position: relative，让#particles-js的绝对定位以当前行为参考，保证背景覆盖整个行的高度
• left: 50% + transform: translateX(-50%)是关键，能让100vw宽度的背景元素水平居中，刚好填满整个视口，不受container的左右内边距限制
• z-index: -1确保背景不会遮挡上方的内容列
• min-height是为了避免行高度塌陷（当内容列无内容时），可根据实际需求修改数值

内容的提问来源于stack exchange，提问作者Muntashir Are Rahi