右对齐的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/