全宽引导下拉导航 - 在Safari中不工作(Full width Bootstrap dropdo

我一直在寻找一种方式来显示“下拉菜单导航”与全宽，幸运的是我发现了一个话题 ，通过低音Jobse回答。

不幸的是，我与Safari浏览器的一个兼容性问题。 正如你可以看到下面的图片，当我从菜单链接删除鼠标，下拉导航停留在那里，就像一个“鬼导航”。

此错误仅发生在Safari浏览器和似乎与财产“的位置是：静态”，你可以在验证Bootply 。

请能有人帮我解决这个问题呢？

Answer 1:

Chrome不具备的问题，但我发现其他WebKit浏览器（有reconq测试）确实有问题描述之上。

至于我明白会发生下列情况的问题：

除去当open从类.nav > li.dropdown其孩子有： position: relative （父） display:hidden 。 前述的面积比所述的宽度窄position: static （父） display:block 。

所以打开/未打开的Webkit之间切换时不仅隐藏position: relative （父） display:hidden区域。

解决方案适用position: static双方有和没有的情况open类：

.nav > li.dropdown { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:table; width: 100%; text-align: center; left:0; right:0; }
.dropdown-menu>li { display: table-cell; }

因此，使用nav > li.dropdown { position: static; } nav > li.dropdown { position: static; }代替nav > li.dropdown.open { position: static; } nav > li.dropdown.open { position: static; }

文章来源: Full width Bootstrap dropdown nav - Not working in Safari