Question

我正在使用Bootstrap 3.3.2。网站即时建设的目标是让导航菜单始终可折叠，就像在移动视图中一样。为了实现这一点，我去了bootstrap.com/customize并将@grid-float-breakpoint:更改为99999999px;这么大，以至于它永远不会解开导航。这适用于除Safari之外的所有其他浏览器。在safari中，我的导航标题图像显示，但下拉菜单的图标消失了。

在safari中检查下拉图标的css时，我发现：

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

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

任何有关解决方案的帮助，或者如果有人知道这是一个bug问题，都会有很多帮助。我已经研究了@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工作。

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

2 个答案: