如何解决在缩放屏幕上隐藏/可见的 Bootstrap 3 响应问题？答案

【问题标题】：How to fix Bootstrap 3 responsive issue with hidden/visible on scaled screen?如何解决在缩放屏幕上隐藏/可见的 Bootstrap 3 响应问题？
【发布时间】：2018-05-13 20:46:25
【问题描述】：

我正在使用 bootstrap 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 键）=> OK (XS)。
将宽度设置为 767px => 出现错误（不显示）。
将宽度设置为 768px => OK (SM)。

全高清屏幕上的另一种方式：

将比例设置为 125%。
将浏览器窗口固定到一侧（半屏）

环境：Win10，Chrome最新版本（Firefox也出现bug）

我该如何解决这个问题？

【问题讨论】：

标签： twitter-bootstrap-3 responsive scaling

【解决方案1】：

刚刚找到解决方案！由于我正在使用 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;

【讨论】：