Bootstrap @grid-float-breakpoint Safari 中的问题

Question

我正在使用 Bootstrap 3.3.2。我构建网站的目标是让导航菜单始终可折叠，就像在移动视图中一样。为了完成这个，我去了 bootstrap.com/customize 并将 @grid-float-breakpoint: 更改为 99999999px; 如此之大以至于它永远不会展开导航。这适用于除 Safari 之外的所有其他浏览器。在 Safari 中，我的导航 header 图像出现了，但是 drop-down 菜单的图标消失了。

在 Safari 中检查 drop-down 图标的 css 我发现：

    @media (min-width: 99999999px;){ 
    .navbar-toggle {
    display: none;
    }
    }

似乎 Safari 认为我的视口实际上大于 99999999px。现在，简单的更改是将我的代码调整为 display: inline; 但是当我这样做时，它会将 .navbar-toggle 从网格系统中取出并且不灵活响应。

任何对解决方案的帮助，或者如果有人知道这是一个错误问题，都会有很大帮助。我已经研究了 @grid-float-breakpoint 的问题，但没有发现其他问题，这只是 chrome 的一个问题，但已经被修补了。

谢谢

Answer 1

大概您指的是 http://crbug.com/375574 ，它显然仍然适用于 Safari 8。解决方案是为 @grid-float-breakpoint 使用一个不那么荒谬的高值。删除一个数字似乎就足够了：

@media (min-width: 999999999px) {

此外，我继续提交了一个 WebKit 错误：https://bugs.webkit.org/show_bug.cgi?id=141533

Answer 2

在 css 搞了几个小时后，我发现将 @media (min-width: 9999999999px) .nav-bartoggle 调整为 -webkit-display: inline; 并调整父元素宽度和其他一些调整可以接受代码。我相信 cvrebert 的方法会更好。但我只是想评论说，在将来有人需要知道的情况下，有纯粹的 css 解决方法。

Bootstrap @grid-float-breakpoint Safari 中的问题

Bootstrap @grid-float-breakpoint issues in Safari

css

twitter-bootstrap

safari

responsive-design

nav