Bootstrap 4 - минимальная ширина элемента изменяется на> 17 миллионов пикселей после достижения последней точки останова на Firefox

Question

Я использую bootstrap 4 для моей темы magento 2. Если я изменю ширину устройства на 575, то возникает странная ошибка, приводящая к тому, что некоторые элементы на моей странице становятся шириной почти 20 миллионов пикселей.

Это прекрасно работает в других браузерах. Я также проверил на мобильном firefox браузере моего android устройства ... то же самое.

Точки останова:

xxs: 0,
xs: 450px,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1500px

ОБНОВЛЕНИЕ : я только что добавил новую точку останова на 450px. Так что попробуйте ширину ниже 450px.

ОБНОВЛЕНИЕ:

Это начинает странно в <div> с классами column main.

Если я установлю max-width: 100% для этого элемента, то он выглядит несколько лучше.

Мне нужно понять, почему это происходит.

Answer 1

Проблема в том, что максимальная ширина для xs не определена в scss\_variables.scss!

До:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;

После:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;

$container-max-widths: (
  xs: 540px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;

---

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

$grid-breakpoints: (
  xs: 0,
  xs_sm: 341px,
  xs_md: 381px,
  xs_lg: 471px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1500px
) !default;

$container-max-widths: (

  xs: 340px,
  xs_sm: 340px,
  xs_md: 380px,
  xs_lg: 470px,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1440px
) !default;