logo标签列表

Bootstrap 3中响应式导航栏的问题

twitter-bootstrapnavbartwitter-bootstrap-3
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>
2
我通过将data-target从.navbar-responsive-collapse更改为.nav-collapse使其正常工作。尽管在这里写着http://getbootstrap.com/components/#navbar-responsive，但似乎在Bootstrap 3 CSS中没有名为navbar-responsive-collapse的类。也许这是他们方面的错误，但我可能只是自己搞错了什么。我还是新手。无论如何，我希望这能帮助其他人。 - user2655858
4
当你找到自己问题的答案时，可以在下面回答并接受答案... 这样问题就会被标记为已解决，更容易筛选出对你特定问题有用的答案。 - sulfureous
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>
请检查您的代码，因为“navbar-ex1-collapse”在Bootstrap3 css文件（bootstrap.css）中不存在。从div标签中删除它，并将其替换为button标签中的“navbar-collapse”。 - skiabox
2
嘿@skiabox，在你给我点踩之前，你应该做一些研究。如果你查看官方BS3默认导航栏文档，你会发现我的代码示例——包括在导航栏DIV中使用“navbar-ex1-collapse”类——大部分都是从那里派生的... 包括这个类：http://getbootstrap.com/components/#navbar-default - Phil Nicholas
也许文档的作者忘记了这一点。检查bootstrap.css文件，看看里面是否有navbar-ex1-collapse类。（如果您没有先检查，请不要再回复） - skiabox
您还可以在官方的Bootstrap网站上查看一个工作示例：http://getbootstrap.com/examples/jumbotron/ （所有浏览器都允许您查看网页的源代码） - skiabox
9
是的，我非常清楚bootstrap.css文件中不包含名为“navbar-ex1-collapse”的CSS类。我甚至不需要打开它就知道这一点。官方Bootstrap网站的作者们也知道这一点。这是一个用于下拉效果的自定义类，也是Bootstrap 3中官方推荐的方式...但你却因为不理解而对它进行了贬低。为什么你不能承认“是的，我想我在官方文档中错过了这一点，抱歉。”如果BS3的作者错了，那就与他们讨论。 - Phil Nicholas
1
这里是官方答案（他们解释了为什么使用这个名称）：https://github.com/twbs/bootstrap/issues/10948。 - skiabox
3
将这个： .navbar-responsive-collapse 修改为： .navbar-collapse 原帖作者已经解决了自己的问题。在此发布更简洁版本以供参考，因为这对我很有帮助。PhilNicholas的版本无法正常工作。
我不确定你为什么认为它没有起作用。这是JSFiddle中的代码，在Firefox 17和Chrome 30中进行了测试... http://jsfiddle.net/philnicholas/aWrYv/ 这难道不是一个右对齐的可折叠菜单，就像问题所要求的那样吗？ - Phil Nicholas
2

Bootstrap 3需要jquery。

--> 最佳实践是将脚本放在末尾。

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

1
Twitter Bootstrap使用捆绑的Collapse jQuery插件来在移动屏幕因素上切换导航菜单。您的问题涉及稍微旧一点版本的Bootstrap，但仍然是相关的-可以通过设置以下元素来触发切换：data-toggle="collapse"和data-target="#valid_css_selector_of_target_element"。
这里的重点是后者-就Collapse插件的功能而言，预定义的Bootstrap类.navbar-responsive-collapse是否存在并不重要，唯一重要的是该元素在您的HTML中存在。然而，Bootstrap文档在此时（我相信很久以前）通过示例显示了使用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"。

"
0

我正在使用Bootstrap 3.2.0。对我有用的解决方法是更改我使用的jQuery版本。显然，jQuery 1.7.1与最新的Bootstrap不兼容。切换到jQuery 2.0.2后，一切都正常了：

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
0

确保在链接 bootstrap-responsive.css 之前先链接 bootstrap.cs

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

https://dev59.com/WmHVa4cB1Zd3GeqPllPE#9626716

2
他正在谈论Bootstrap 3，其中它已经将CSS合并在一起。 - Ravimallya
0
这对我有用：我将 .navbar-ex1-collapse 更改为 .navbar-collapse。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接