25

我对 Bootstrap 最新版本中的响应式导航栏没有任何问题，但我无法让版本 3 工作。切换按钮正确显示，一切都消失了，但品牌，但按钮不响应点击。（http://getbootstrap.com/components/#navbar-responsive）任何帮助将不胜感激！这是到目前为止的代码：

<!DOCTYPE html>
<html>
<html lang="en">

    <head>
    <title>Hello World</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <section>   
            <div class="navbar navbar-fixed-top">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href= "#" class="navbar-brand">Brand Name</a>
                <div class="nav-collapse navbar-responsive-collapse collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li class="active "><a href="#">Home</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>   
                </div>  
            </div>
        </section>
4

7 回答 7

12

我相信下面的代码会产生你想要的效果。具体来说，BS3 中没有“ navbar-responsive-collapse ”类（参见“bootstrap.css”文件）。从第 3 版开始，Twitter Bootstrap 默认是响应式的，因此许多响应式代码标志现在都被嵌入到框架中，不再需要显式调用。

这是右对齐可折叠菜单的 BS3 版本：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav pull-right">
        <li class="active "><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>   
</div>
</div>
于 2013-08-27T21:53:05.680 回答
3

改变这个： .navbar-responsive-collapse

对此： .navbar-collapse

原始海报解决了他自己的问题。在这里发布一个更简洁的版本，因为这对我有帮助。PhilNicholas 的版本不起作用。

于 2013-09-10T11:06:21.967 回答
2

Bootstrap 3 需要 jquery。

--> 将脚本放在最后的最佳实践。

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

于 2014-01-25T04:53:11.257 回答
1

Twitter bootstrap 使用捆绑的Collapse jquery 插件来切换移动屏幕外形上的导航菜单。您的问题与 bootstrap 的稍旧版本有关，但仍然相关 - 可以通过设置在元素上触发切换：

data-toggle="collapse"和 data-target="#valid_css_selector_of_target_element"。

这里要注意的是后者——就 Collapse 插件的功能而言，是否有预定义的引导类并不重要.navbar-responsive-collapse，这里唯一重要的是元素存在于你的 html 中。然而，引导类的存在很可能会影响它的样式。

在撰写本文时（我相信很久以来）的引导文档通过示例显示了使用 id 属性来选择目标元素；我发现这更好一些，因为在同一页面上可以有多个具有相同类的元素，而 Id 在 html 文档中是唯一的。所以，在你的情况下：

<div class="collapse navbar-collapse navbar-ex1-collapse">看起来像<div class="collapse navbar-collapse navbar-ex1-collapse" id="my_nav">，并且切换按钮将具有属性data-target="#my_nav".

于 2015-12-11T05:25:31.687 回答
0

这对我有用：我将 .navbar-ex1-collapse 更改为 .navbar-collapse。

于 2014-03-11T14:23:23.027 回答
0

make sure link the bootstrap.cs before bootstrap-responsive.css

<link href="css/bootstrap.css" rel="stylesheet" />  
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

https://stackoverflow.com/a/9626716/2127493

于 2013-12-10T20:49:20.153 回答
0

我正在使用 Bootstrap 3.2.0。为我解决这个问题的是更改我使用的 jQuery 版本。显然，jQuery 1.7.1 与最新的引导程序不兼容。切换到 jQuery 2.0.2 后，一切都很好：

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
于 2014-10-29T16:30:36.143 回答