Css 右对齐的引导容器，也与默认容器对齐

我一直在尝试制作一个引导容器，该容器“溢出”到页面的右侧，但也与标准引导容器对齐。到目前为止，我已经尝试复制标准容器的代码并更改

max width

值，但我似乎无法使其与标准容器对齐。以下是我到目前为止的情况：

  width: 100%;
  padding-left: 15px;
  margin-left: auto;
  margin-top: 3rem;

  @media (min-width: 576px) {
    max-width: 675px;
  }
  
  @media (min-width: 768px) {
    max-width: 900px;
  }
  
  @media (min-width: 992px) {
    max-width: 1200px;
  }
  
  @media (min-width: 1200px) {
    max-width: 1425px;
  }

有谁能帮我做到这一点吗

---

您可以根据每个断点的引导

container

宽度计算自定义容器宽度的左边距。为了使其与容器对齐，左边距应为：

左边距：计算（50vw-（容器宽度/2））

因此，CSS将是：

.container-custom {
   padding-left: 15px;
   padding-right: 15px;
}

@media (min-width:576px){
  .container-custom {
    margin-right: 0;
    margin-left: calc(50vw - 270px);
  }
}

@media (min-width:768px){
  .container-custom {
    margin-right: 0;
    margin-left: calc(50vw - 360px);
  }
}

@media (min-width:992px){
  .container-custom {
    margin-right: 0;
    margin-left: calc(50vw - 480px);
  }
}

@media (min-width:1200px){
  .container-custom {
    margin-right: 0;
    margin-left: calc(50vw - 570px);
  }
}

---

演示：

这里是另一种绝对定位方法

诀窍是自定义

：在相对定位的自定义容器的
之后，使其左侧位于自定义容器的100%，右侧位于-（50vw-50%）。百分比与相对定位的自定义容器相关

如果您使用引导SASS文件创建自定义主题，那么Zim的方法很好，因此您可以获得
$container max widths
。我的方法不需要知道容器的宽度，因为它使用百分比进行绝对定位

布局

...

风格
。容器自定义{
位置：相对位置；
}
.集装箱海关：之后{
内容：''；
位置：绝对位置；
左：100%；
排名：0；
底部：0；
右：计算（50%-50vw）；
}
.container custom.bg primary:之后{
背景色：var（--主色）；
}

结果

演示：
这对于CSS网格来说是微不足道的，但这里有一个想法——或者是的，如果OP可以，自定义容器内的内容限制在容器的宽度内，这也可以。这也会导致正文上出现水平滚动。@Zim：这就是为什么我要评论并询问OP的“溢出”含义，因为从发布的OP屏幕截图来看，自定义容器内的内容似乎居中，并且仅限于容器的宽度。：）