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

我目前正在使用引导程序4 alpha 4

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

当我访问网站并将视口宽度调整为介于992px和1008px之间的任意位置时（均为inc.），网站的部分将消失，因为此响应断点未在已建立的引导类中定义。我已经用最新的Chrome和FF浏览器对此进行了测试

有人知道我怎么调试这个东西吗

我尝试在CSS文件中搜索值

992

和

1008

以及+/-1，但是

1008

值在任何地方都找不到（在整个项目中！），并且

992

值在样式表AFAIK中正常使用

---

你可以看到这个问题。当您在992px和1008px之间调整浏览器宽度时，徽标将消失。

看起来徽标所在的容器的最大宽度比其激活所需的最小宽度小

尝试更改此选项（theme.css，第703-719行）：

为此：

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 992px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;      
        padding-left:0;
        padding-right:0;        
    }
}

---

然后徽标始终可见。

问题在于滚动条。

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

事实上，如果将

overflow:hidden

属性添加到

HTML

标记中，一切都将正常工作

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

问题的关键

调试站点、JS（缩小）和功能（其一部分）是：

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

//…请在此处按此行操作______
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=t&&n=t；
u、 default.responsive.current_width=n，u.default.responsive.mobile=u.default.responsive.current_width

当视口为1007 in

u.default.responsive.current_width

时，可以看到991

u.default.responsive.min_width

为992

条件

u.default.responsive.current_width

为真，并启动

remove node

功能

要进行调试，请在chrome的“Elements”选项卡上找到元素ID

顶部菜单

，并设置

中断。。。节点删除

，检查堆栈可以找到上面的函数和所有值。chrome的“窗口大小调整器”插件帮助您一起检查视口和窗口大小

---

您案例中的解决方案有点复杂，因为CMS和/或框架比较复杂。您可以将

（window.width（）

替换为

window.innerWidth

也许您可以解决它，但我不知道主题的其余部分会发生什么

但您可以在stackoverflow上找到一些解决方案：

还是在这里

---

希望这对您有所帮助：）

我很感激您在代码中找到了这个。我一定会修正这一点。然而，原来的问题仍然存在。幻影响应断点仍然存在于992px和1008px之间，这会破坏更多的东西，而不仅仅是徽标。

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

//.........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()
})