全宽 Bootstrap 下拉导航 - 在 Safari 中不起作用 [英] Full width Bootstrap dropdown nav - Not working in Safari

问题描述

我一直在寻找一种方法来显示全宽的下拉导航"，幸运的是我找到了一个 .

请问，有人能帮我解决这个问题吗?

解决方案

Chrome 没有这个问题，但我发现其他 webkit 浏览器(用 reconq 测试)确实有上述问题.

据我所知，会发生以下问题:

从 .nav 中删除 open 类时li.dropdown 它的孩子得到:position:relative (parent) display:hidden.前面的面积小于position:static(父)display:block的宽度.

所以当在打开/不打开之间切换时，Webkit 只会隐藏 position:relative (parent) display:hidden 区域.

解决方案将 position: static 应用于有和没有 open 类的情况:

.nav >li.dropdown { 位置:静态；}.nav >li.dropdown.open .dropdown-menu {display:table;宽度:100%；文本对齐:居中；左:0;右:0;}.dropdown-menu>li { display: table-cell;}

所以使用 nav >li.dropdown { 位置:静态；} 而不是 nav >li.dropdown.open { 位置:静态；}

I was looking for a way to display the "dropdown nav" with full width and luckily I found a topic, answered by Bass Jobse.

Unfortunately, I identified one compatibility issue with Safari browser. As you can see in the picture below, when I remove the mouse from menu link, the dropdown nav stays there, like a "ghost nav".

This bug only occurs in Safari browsers and appears to be related to property "position: static", as you can verify in Bootply.

Please, could someone help me to solve this issue?

解决方案

Chrome does not have the issue, but i found other webkit browsers (tested with reconq) indeed have the issue describe above.

As far as i do understand the issue the following happens:

when removing the open class from .nav > li.dropdown its children got: position: relative (parent) display:hidden. The area of the preceding is smaller than the width of the position: static (parent) display:block.

So when switching between open / not open Webkit does only hide the position: relative (parent) display:hidden area.

Solution apply position: static on both the situation with and without the open class:

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

So use nav > li.dropdown { position: static; } instead of nav > li.dropdown.open { position: static; }

这篇关于全宽 Bootstrap 下拉导航 - 在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！