bootstrap-4 - 如何调试不需要的响应断点？

Question

我目前正在使用 Bootstrap 4 alpha 4。

我买了一个网站，我开始研究和修改。我有一个特别奇怪的问题，我认为它一定与媒体查询有关。最初的开发者拒绝解决这个问题。

当我访问该网站并将视口(viewport)宽度调整到 992 像素和 1008 像素(包括)之间的任何位置时，网站的部分会消失，因为该响应断点未在已建立的 Bootstrap 类中定义。我已经使用最新的 Chrome 和 FF 浏览器对此进行了测试。

有人知道我如何调试这个东西吗？

我试过搜索值 992和 1008以及 CSS 文件中的 +/- 1 但 1008在任何地方都找不到值(在整个项目中!)和 992 value 在样式表 AFAIK 中正常使用。

你可以看到这个问题live here .当您在 992 像素和 1008 像素之间调整浏览器宽度时， Logo 将消失。

Answer 1

问题是滚动条。

1008px-992px=16px //the scrollbar dimension

实际上，如果添加 overflow: hidden HTML 的属性(property)标签，一切都会正常工作。

您的媒体查询和 javascript 计算的宽度不同(一个有滚动条，另一个没有滚动条)。

Here a JSFiddle example的问题。

调试站点，JS(缩小)和功能(它的一部分)是:

/prestashop/PRS01/PRS0100014/themes/cenzo/assets/js/theme.js

//.........FOLLOW THIS LINE............................................................................_____HERE______
u.default.responsive = u.default.responsive || {}, u.default.responsive.current_width = (0, s.default)(window).width(), u.default.responsive.min_width = 992, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, (0, s.default)(window).on("resize", function() {
    var e = u.default.responsive.current_width,
        t = u.default.responsive.min_width,
        n = (0, s.default)(window).width(),
        i = e >= t && n < t || e < t && n >= t;
    u.default.responsive.current_width = n, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, i && o()
}), (0, s.default)(document).ready(function() {
    u.default.responsive.mobile && o()
})

当 u.default.responsive.current_width 中的视口(viewport)为 1007 时你可以看到991
u.default.responsive.min_width是 992

条件 u.default.responsive.current_width < u.default.responsive.min_width是真的， remove node函数被触发。

为了调试这个，在 chrome 的“元素”选项卡上找到元素 ID top-menu并设置 break on... node removal ，检查堆栈你可以找到上面的函数和所有值。用于 chrome 的“Window Resizer”插件可帮助您一起检查视口(viewport)和窗口大小。

您的解决方案有点复杂，因为 CMS 和/或框架很复杂。您可以替换 (window).width()与 window.innerWidth可能你解决了它，但我不知道主题的其余部分会发生什么。

但是你可以在 stackoverflow 上找到一些解决方案:

CSS Media Queries and Firefox's Scrollbar Width

或在这里

$(window).width() not the same as media query

希望这对你有帮助:)