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