代码之家 › 专栏 › 技术社区 › user3511057

@介质下拉菜单-显示菜单

media-queries twitter-bootstrap css html

user3511057 · 技术社区 · 8 年前

我想让我的网站响应不同的屏幕大小。目前,我正在以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>

我错过了什么? 我如何解决我的问题?

任何帮助都将不胜感激。

谢谢

1 回复 | 直到 8 年前

Aakash Thakur 8 年前

其中一个原因是打乱了 jQuery 和 bootstrap.js jquery 脚本在之前 bootstrap.min.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>