Question

我今天早上第一次钻研Bootstrap并且我的可折叠菜单出了问题。当浏览器的大小低于768px时，我可以在右上方看到汉堡包，但它没有任何功能。我有一种感觉，这是因为我使用CDN来引用Bootstrap。

<!DOCTYPE html>
<html>

<head lang='en'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Text for title</title>
</head>

<body>
    <div class='navbar navbar-default'>
        <div class="container-fluid">
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' aria-expanded="false">
                        <span class='sr-only'>Toggle Navigation</span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                        <span class='icon-bar'></span>
                </button>
                <h1 class='navbar-brand'><a  href='#'>Name goes here</a></h1>
            </div>

            <div class='collapse navbar-collapse'>
                <ul class= 'nav navbar-nav'>
                    <li role='navigation' ><a href='#'>Home</a></li>
                    <li role='navigation'><a href='#'>About</a></li>
                    <li role='navigation'><a href='#'>Portfolio</a></li>
                    <li role='navigation'><a href='#'>Resources</a></li>
                    <li role='navigation'><a href='#'>Contact</a></li>
                </ul>
            </div>
        </div>
    </div>


   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

</body>
</html>

Answer 1

您在按钮上缺少data-target，该按钮链接到可折叠div上的标识符。试试这个：

<div class='navbar navbar-default'>
    <div class="container-fluid">
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target="#mynavbar" aria-expanded="false">
                    <span class='sr-only'>Toggle Navigation</span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
            </button>
            <h1 class='navbar-brand'><a  href='#'>Name goes here</a></h1>
        </div>

        <div id="mynavbar" class='collapse navbar-collapse'>
            <ul class= 'nav navbar-nav'>
                <li role='navigation' ><a href='#'>Home</a></li>
                <li role='navigation'><a href='#'>About</a></li>
                <li role='navigation'><a href='#'>Portfolio</a></li>
                <li role='navigation'><a href='#'>Resources</a></li>
                <li role='navigation'><a href='#'>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

通过CDN引导

1 个答案: