logo标签列表

Bootstrap导航栏未切换

javascripthtmlcsstwitter-bootstrap
3
当我尝试使用基于 jumbotron 的页面的移动版本时，导航栏无法切换。我希望它像 示例 中那样展开，但实际上并没有。也许我缺少一些代码，你能帮我让它正常工作吗？这个截屏显示了当导航栏在 [the example] 中展开时应该是什么样子。

enter image description here

这是我的页面，它基于 jumbotron，但当我按右上角的按钮时，导航栏下拉菜单无法工作，它不会切换。

enter image description here

我的代码（与示例相同）。
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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>
            <a class="navbar-brand" href="/">Customer Service</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" action="/account/do_login" method="post">
                <div class="form-group">
                    <input type="text" name="email" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" name="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-success">Sign in</button>
            </form>
        </div>
        <!--/.navbar-collapse -->
    </div>
</nav>
1
检查你的浏览器控制台，看看是否有错误？ - Divyesh Savaliya
@DivyeshSavaliya 很遗憾，没有错误信息。 - Niklas Rosencrantz
1
点击切换后请检查。 - Divyesh Savaliya
1
请将代码片段发布到pastebin或jsfiddle上，如果您不展示需要帮助的内容，我们无法提供帮助。 - php_coder_3809625
1
可能是您的Bootstrap JS路径有误。 - Özgür Ersil
1
您没有包含Bootstrap JS。 - max
2个回答
3
请检查您的bootstrap.min.js或bootstrap.js文件是否正确加载。可能是它们没有正确加载。
0
你能展示一下导入bootstrap和jquery的部分吗？
我相信问题就出在那里。因为对我来说，这个例子是可以运行的。在我整理导入之前，我也遇到了同样的问题。
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

这应该按照以下顺序放置在 <head> 中，以提供 Bootstrap 的正确功能。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接