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

保罗，首先，你可以尝试这样做。

在页面的末尾，您有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>
如果您对此进行评论，那么您的菜单将再次开始工作。

看看对此进行整理以解决问题。

Bootstrap下拉菜单隐藏导航链接

1 个答案: