与默认容器对齐的右对齐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;
  }

有人能帮我实现这个吗？

- Nathan Dunn

---

这在CSS-Grid中很容易实现，但是这里有一个想法 - https://dev59.com/zZDea4cB1Zd3GeqPhNQZ - Paulie_D

CSS如何使内容从div溢出到整个屏幕宽度？ - Paulie_D

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

- Carol Skelly

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/

- David Liang

---

是的，如果 OP 对自定义容器内的内容被限制在容器宽度范围内没有异议，这也可以实现。但这也会导致页面出现水平滚动条。 - Carol Skelly

@Zim：这就是为什么我要评论并询问OP所说的“溢出”是什么意思，因为从OP发布的截图中可以看出，自定义容器内部的内容似乎是居中且限制在容器的宽度范围内。 :) - David Liang