html - Bootstrap 下拉菜单隐藏导航链接

Question

我在移动设备上使用下拉菜单时遇到问题。我正在使用 Twitter Bootstrap，当我在移动设备上打开菜单时，它偏向右侧，因此很难看到导航链接。我想将其分解为另一行，并将菜单项放在左侧。

我尝试了很多方法并找到了正确的 id/class 选择器，但我不确定如何将其分解为另一行。

这是我正在编辑的媒体查询

    /** Mobile **/
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {

#bs-example-navbar-collapse-1 .navbar-nav .pages {



}
}

HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li class="pages"><a href="#section2">About<span class="sr-only">(current)</span></a></li>
                    <li class="pages"><a href="#section3">Free Trial</a>    </li>
                    <li class="pages"><a href="#section3">Subscribe</a></li>
                    <li class="pages"><a href="#section4">Testimonials</a>    </li>
                    <li class="pages"><a href="#section5">Who</a></li>
                    <li class="pages"><a href="#section6">FAQ</a></li>

                </ul>

            </div>

我不是想宣传我的网站，但如果它更容易看到，您可以访问 growthengine.co 看看我的菜单是什么意思。

提前感谢您提供的任何帮助。

Answer 1

Paul，首先请你尝试这样做。

在页面的末尾，您有 Bootstrap js 文件。
换成这个……

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">   </script>

当我这样做时，您的菜单开始按预期工作。

编辑:
当我链接到您的自定义 CSS 时，问题又回来了。
所以原因就在那里，您的自定义 css 代码。
在左上角你有这个...
<h1><a href="#top">Growth <span id="h1highlight">ENGINE</a></span></h1>
如果您将其注释掉，那么您的菜单将再次开始工作。

考虑解决这个问题以解决问题。