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，首先请您尝试一下。

在您的页面末尾，您有引导 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>
如果您将此注释掉，那么您的菜单将再次开始工作。

查看整理以解决问题。