Question

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

我已经购买了一个我已经开始学习和修改的网站。我有一个特别奇怪的问题，我认为必须以某种方式与媒体查询相关。原始开发者拒绝解决这个问题。

当我访问网站并将视口宽度调整到992px和1008px（两者都有）之间的任何位置时，网站的某些部分会消失，因为此响应断点未在已建立的Bootstrap类中定义。我已经使用最新的Chrome和FF浏览器进行了测试。

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

我尝试在CSS文件中搜索值992和1008以及+/- 1，但在任何地方都找不到1008值（在整个项目中！并且样式表AFAIK中正常使用992值。

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

Answer 1

问题是滚动条。

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

事实上，如果您将overflow: hidden属性添加到HTML标记，一切都会正常运行。

您的媒体查询和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中的视口为1007时，您可以看到991

u.default.responsive.min_width是992

条件u.default.responsive.current_width < u.default.responsive.min_width为真，并且remove node函数被触发。

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

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

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

CSS Media Queries and Firefox's Scrollbar Width

或在这里

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

希望这可以帮助你：）

Answer 2

徽标所在的容器看起来像最大宽度的数量 SMALLER ，而不是活动所需的最小宽度。

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

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

到此：

@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;        
    }
}

然后徽标始终可见。

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

2 个答案: