Question

我在制作这个Bootstrap菜单时遇到了不好的时间，我无法弄清楚为什么它不会崩溃，动画。一切都很好，但按钮不起作用。

<!DOCTYPE html>
<html>
<header>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/lib/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="stylesheet.css" rel="stylesheet">
</header>
<body>
<div class="navbar navbar-inverse navbar-fixed-top container">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-collapse">
    <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>Dropdown</li></a>
        <a href="#"><li>Tell me More</li></a>
        <a href="#"><li>Contact</li></a>
        <a href="#"><li>Login</li></a>
        <a href="#"><li>Sign up</li></a>
    </ul>
</div>

请帮忙吗？

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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.4/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top container">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-collapse">
    <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>Dropdown</li></a>
        <a href="#"><li>Tell me More</li></a>
        <a href="#"><li>Contact</li></a>
        <a href="#"><li>Login</li></a>
        <a href="#"><li>Sign up</li></a>
    </ul>
</div>

这是一个有效的例子。使用 data-target =“。navbar-collapse” @Peszo表示无效。最有用的事实是在使用代码片段时调整窗口大小。

如果您遇到任何其他问题，请发表评论。如果它有帮助，请+1。

编辑根据需要，我进一步设计了导航栏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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.4/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top container">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Dropdown</a></li>
        <li><a href="#">Tell me More</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Sign up</a></li>
    </ul>
</div>

Answer 2

可能是您正在使用旧版本的jquery库文件。使用最新版本文件。

demo

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 3

试试这个.. 您在<li>代码后使用<div class="container"> <div class="navbar-header navbar-inverse navbar-fixed-top"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-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> </button> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> **<li><a href="#">Home</a></li> <li><a href="#">Dropdown</a></li> <li><a href="#">Tell me More</a></li> <li><a href="#">Contact</a></li> <li> <a href="#">Login</a></li> <li> <a href="#">Sign up</a></li>** </ul> </div>代码...

{{1}}

Bootstrap响应式菜单不会响应

3 个答案: