引导导航的样式错误答案

【问题标题】：Styling error of bootstrap navigation引导导航的样式错误
【发布时间】：2016-04-23 12:55:48
【问题描述】：

我使用的是由 respondcms 创建的引导模板。在桌面上一切看起来都很好，但在移动设备上，折叠的导航无法访问。下拉列表中的条目不可点击。

我已经尝试了很多设置，但一切看起来都与http://getbootstrap.com/examples/theme/ 上的示例非常相似

有人知道吗？该网站可通过http://cms.h2516034.stratoserver.net/sites/zbv/index访问

提前致谢

拉曼

【问题讨论】：

只是为了澄清一下：它不适用于实际的手机，但在浏览器缩小到手机大小的桌面上可以工作吗？因为我手边没有智能手机，但手机尺寸功能正常。请粘贴您的 html 代码，以便我们查找问题。
没有。它甚至不适用于浏览器缩小到移动大小的桌面。在最大化的浏览器（在桌面上）上是正确的。
这很令人困惑，因为该链接在我的计算机上工作。我正在使用谷歌浏览器
@CZorio 尝试点击子菜单项（Aktivitäten - Brotbacken）
我明白了。向我们展示您的代码，以便我们查找错误。我可以粘贴有效的引导可折叠导航栏的工作版本，但这与查看演示没有什么不同。这可能是代码错误，请显示。

标签： html css twitter-bootstrap navigation

【解决方案1】：

看来您的问题与 z-index 或其他有关。您可以在菜单点“Aktivitäten”中进行测试。将浏览器缩小，您会看到“Kontakt”条目下的条目是可访问的。可能是您使用的 CMS 的渲染问题？

可能的解决方案：（未在全球范围内测试）

body .navbar ul.dropdown-menu li, body .navbar ul.dropdown-menu li a {
height: 30px !important;
line-height: 30px !important;
position: relative;
z-index: 100000;
}

respond.min.css

【讨论】：

这不是评论@Leothelion
感谢 CHN-mk。这看起来相当不错，但与引导程序的示例不完全一样。如果我展开“Aktivitäten”，下一个顶级项目应该仍然可见（参见：getbootstrap.com/examples/navbar-fixed-top）所以它可能是显示和/或位置的问题......？
您的 html 代码与引导程序本身的示例代码中的内容不完全相同。就像我说的那样，我认为这可能是您的 CMS 中的渲染问题。有关原始示例代码，请参阅 getbootstrap.com/components/#navbar。另外我不知道问题是否是由于缺少容器类引起的。 @拉曼

【解决方案2】：

@Raman 试试这个。它应该工作

<style>
@media(max-width:767px){
    body .navbar li {
        height: auto;
        line-height: 65px;
    }
}
</style>

【讨论】：