Question

我希望我的网站能够响应不同的屏幕尺寸。目前我正在测试我的网站，宽度为765px（及更低）。我想要发生的是当我点击三个栏时菜单出现，但没有任何反应。没有菜单，只有“品牌名称”。

我正在使用我的菜单的引导程序导航。

这是页面的截图（已编辑）：

Jquery代码： - 外部文件

@media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
    .primary {
        color: orange !important;
        font-size: 14px;
    }
}

颜色变化适用于测试尺寸。

HTML： - 仅限导航

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header">
             <a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
            </div>
             <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                 <li class="active"><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="services.php">Services</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="privacy.php">Privacy</a></li>
                    <li><a href="terms.php">Terms</a></li>
                    <li><a href="copy.php">Copyright</a></li>
                </ul>
            </div><!-- navbar collapse -->
        </div>
    </nav>

我错过了什么？我怎么能解决我的问题？

任何帮助都将不胜感激。

由于

Answer 1

其中一个原因是会弄乱jQuery和bootstrap.js的顺序。 Bootstrap需要jQuery才能运行一些事件。因此，请确保您的jquery脚本位于bootstrap.min.js或bootstrap.js之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header">
             <a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
            </div>
             <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                 <li class="active"><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="services.php">Services</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="privacy.php">Privacy</a></li>
                    <li><a href="terms.php">Terms</a></li>
                    <li><a href="copy.php">Copyright</a></li>
                </ul>
            </div><!-- navbar collapse -->
        </div>
    </nav>

@media下拉菜单 - 显示菜单

1 个答案: