Right aligned Bootstrap container which also aligns with default container

问题

I've been trying to make a Bootstrap container which "spills out" onto the right hand side of the page but also aligns well with the standard Bootstrap container. So far I have tried duplicating the code for the standard container and altering the max-width values but I can't ever seem to make this align with the standard container. Here is what I have so far:

  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;
  }

Would anyone be able to help me achieve this?

回答1:

You can calculate the left margin of the custom container width based on the Bootstrap container width for each breakpoint. In order for it to align with container, the left margin is going to be:

margin-left: calc(50vw - (container width/2))

So the CSS would be:

.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);
  }
}

Demo: https://www.codeply.com/go/gO5EmIIeDi

回答2:

Here is another approach with absolute positioning.

The trick is to customize :after of the relative positioned custom container so that its left is at 100% of the custom container, and its right is at -(50vw - 50%). The percentage is related to the relative positioned custom container.

Zim's approach is good if you're making your custom theme with Bootstrap SASS files and hence you get $container-max-widths. My approach doesn't need to know the container's width because it's doing absolute positioning with percentage!

Layout

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

Style

.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);
}

Result

demo: https://jsfiddle.net/davidliang2008/gj21tdea/23/

来源：https://stackoverflow.com/questions/56778466/right-aligned-bootstrap-container-which-also-aligns-with-default-container