Bootstrap 5中如何让标题两侧横线全屏且标题靠container对齐

问题核心 #

之前的实现里，标题被container限制了宽度，导致伪元素无法突破容器范围，没法实现横线全屏的效果。需要拆分结构，让横线的载体脱离container，同时标题文本保持在container内对齐。

调整后的HTML结构 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="title-decorated">
  <div class="container">
    <h1>My Title</h1>
  </div>
</div>

对应的CSS代码 #

/* 全屏容器，承载横线伪元素 */
.title-decorated {
  position: relative;
  margin: 2rem 0; /* 可根据需求调整上下间距 */
}

/* 生成左右横线 */
.title-decorated::before,
.title-decorated::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-bottom: 2px solid #333; /* 自定义横线颜色 */
  /* 利用Bootstrap内置的容器最大宽度变量，自动适配不同断点 */
  width: calc(50% - (var(--bs-container-max-width) / 2));
}

.title-decorated::before {
  right: 50%;
}

.title-decorated::after {
  left: 50%;
}

/* 标题样式：居中对齐，消除默认边距 */
.title-decorated .container h1 {
  text-align: center;
  margin: 0;
}

原理说明 #

1. 用全屏的.title-decorated作为父容器，伪元素基于它定位，能自然延伸到屏幕边缘。
2. 通过Bootstrap的--bs-container-max-widthCSS变量，动态计算横线的宽度，确保在任何屏幕尺寸下，横线都能刚好衔接container的左右边缘。
3. 标题文本放在container内，既保持了和页面其他内容的对齐，又通过text-align: center实现居中。

兼容说明 #

如果需要兼容不支持CSS变量的旧浏览器，可以手动替换var(--bs-container-max-width)为对应断点的固定值，比如：

• 移动端：calc(50% - 150px)（对应container的300px宽度）
• 桌面端：calc(50% - 540px)（对应container的1080px宽度）
  配合媒体查询即可实现适配。

内容的提问来源于stack exchange，提问作者Mārcis