Как исправить проблему с загрузкой Bootstrap 3 со скрытого / видимого на уменьшенном экране? - PullRequest
Новая
       27

Как исправить проблему с загрузкой Bootstrap 3 со скрытого / видимого на уменьшенном экране?

0 голосов
/ 13 мая 2018

Я запускаю приложение с начальной загрузкой 3.3.7 и у меня проблема с изменением размера на уменьшенном экране.

При установке ширины $container-width - 1px все visible-* и hidden-* игнорируются.Он работает при 100% масштабировании, но при 125% и выше он терпит неудачу.

У меня есть следующий демонстрационный код: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrapd/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <div>SM=768,MD=992,LG=1200</div>
  <span class="visible-xs">XS</span>
  <span class="visible-sm">SM</span>
  <span class="visible-md">MD</span>
  <span class="visible-lg">LG</span>
  <hr>
  <span class="hidden-xs">XS</span>
  <span class="hidden-sm">SM</span>
  <span class="hidden-md">MD</span>
  <span class="hidden-lg">LG</span>
</body>
</html>

Способ воспроизведения:

  • Установите масштаб на 125%.
  • Установитеширина окна до 766 пикселей (например, с помощью клавиши F12) => ОК (XS).
  • Установить ширину 767px => появляется ошибка (без отображения).
  • Установить ширину 768px => OK (SM).

Другой способ включитьЭкран FHD:

  • Установите масштаб на 125%.
  • Закрепите окно браузера в сторону (половина экрана)

Среда: Win10,Последняя версия Chrome (ошибка также появляется в Firefox)

Как это исправить?

1 Ответ

0 голосов
/ 15 мая 2018

Только что нашел решение!Поскольку я работаю с SASS, я добавил следующее к своему _variables.scss: 

$screen-xs-max: $screen-sm-min - 0.1;
$screen-sm-max: $screen-md-min - 0.1;
$screen-md-max: $screen-lg-min - 0.1;
...