右对齐 Bootstrap 容器，它也与默认容器对齐

Question

我一直在尝试制作一个 Bootstrap 容器，它“溢出”到页面的右侧，但也与标准的 Bootstrap 容器很好地对齐。到目前为止，我已经尝试复制标准容器的代码并更改 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;
  }

有人能帮我实现吗？

Answer 1

您可以根据每个断点的 Bootstrap container 宽度计算自定义容器宽度的左边距。为了使其与容器对齐，左边距将是：

margin-left: calc(50vw - (container width/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);
  }
}

演示：https://www.codeply.com/go/gO5EmIIeDi

Answer 2

这是另一种绝对定位的方法。

诀窍是自定义相对定位自定义容器的:after，使其左侧位于自定义容器的 100%，右侧位于 -(50vw - 50%)。百分比与相对定位的自定义容器有关。

如果您使用 Bootstrap SASS 文件制作自定义主题，Zim 的方法非常好，因此您会得到$container-max-widths。我的方法不需要知道容器的宽度，因为它使用百分比进行绝对定位！

布局

<div class="container container-custom text-center bg-primary text-white">
    ...
</div>

风格

.container-custom {
    position: relative;
}

.container-custom:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    right: calc(50% - 50vw);
}

.container-custom.bg-primary:after {
    background-color: var(--primary);
}

结果

演示： https://jsfiddle.net/davidliang2008/gj21tdea/23/