Как заставить бутстреп-контейнеры работать в Гутенбурге alignfull - PullRequest
Новая
       14

Как заставить бутстреп-контейнеры работать в Гутенбурге alignfull

0 голосов
/ 20 ноября 2018

Я сделал класс gutenburg .alignfull 

margin-left  : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width    : 100vw;

, который прекрасно работает.

Я поместил загрузочный контейнер в ... 

<div class="alignfull green-bg">
    <div class="container">
        Hello
    </div>
</div>

, который прекрасно работает для сохранения содержимого в сетке.Однако он перестает работать, когда я смотрю на небольших экранах.

Заполнение и поле, которые обычно отскакивают от края браузера, исчезают со страницы.

Таким образом, мой контент направлен прямо к стене, а не дополнен, как должен быть хороший контейнер начальной загрузки.

Кто-нибудь знает, как это исправить?

Я пробовал разные CSS 

width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;

И я рассматриваю медиа-запрос для переопределения выравнивания на меньших экранах.Я просто чувствовал, что должен быть способ CSS, который все еще поддерживает .container.

Спасибо

1 Ответ

0 голосов
/ 21 ноября 2018

Почему бы вам не попробовать изменить классы alignfull css, чтобы они применялись только на больших экранах, например: 

@media all and (min-width: 768px) {
  margin-left  : calc( -100vw / 2 + 100% / 2 );
  margin-right : calc( -100vw / 2 + 100% / 2 );
  max-width    : 100vw;
}

Обязательно настройте точку останова (768px) в соответствии с вашим проектом.

...