jquery - Bootstrap 3 自定义多级菜单无法正常运行

Question

我正在使用 Bootstrap 3 创建 HTML 模板。您可以在此处找到演示 HTML 页面:http://cpimediagroup.com/demo/oasis2/

我使用这个“hack”创建了一个多级自定义子菜单(单击“服务”，您会看到它)http://www.bootply.com/92442

现在的问题是，当您单击它打开的任何子菜单打印和包装时。现在点击石油和天然气，它会打开，但第一个不会关闭。

我正在使用 Bootstrap 3。我厌倦了修复它，但没有任何效果。

我什至搜索了其他主题，但找不到任何帮助。

感谢等待回复。

P.S 搜索框也离开了主导航。

Answer 1

A margin-right:-15px正在应用于 .navbar-nav.navbar-right:last-child在 bootstrap.min.css将搜索框向右拉。要解决此问题，请通过在样式表中添加以下样式来覆盖此样式

@media (min-width: 768px)
.navbar-nav.navbar-right:last-child {
   margin-right:10px; // add the value you need
}

关于下拉检查下面的 fiddle 是否对你有帮助

Fiddle

注意:我只在 fiddle 中加入了 Jquery 来添加 open类名，所以我不确定我所做的更改是否会影响您用于偏移的其他内容。