Выровненный вправо контейнер 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

Вы можете вычислить левое поле ширины пользовательского контейнера на основе ширины начальной загрузки 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%).Процент зависит от относительного расположения пользовательского контейнера.

Подход Zim хорош, если вы создаете свою пользовательскую тему с Bootstrap SASS-файлами и, следовательно, получаете $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/