Question

我在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>

Answer 1

我相信下面的代码会产生您正在寻找的效果。具体来说，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>

Answer 2

改变这个： .navbar-responsive-collapse

到此： .navbar-collapse

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

Answer 3

Bootstrap 3需要jquery。

- ＆GT;将脚本放在最后的最佳做法。

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

Answer 4

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

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

这里的问题是后者 - 就Collapse插件的功能而言，无论你是否有预定义的引导类.navbar-responsive-collapse都没关系，唯一重要的是你的元素存在于你的HTML。然而，bootstrap类的存在很可能会影响它的样式。

撰写本文时的引导文档（我相信自长期以来）通过示例显示use of an id attribute来选择目标元素;我发现它更好一点，因为在同一页面上可以有多个具有相同类的元素，而Ids在html文档中是唯一的。所以，在你的情况下：

<div class="collapse navbar-collapse navbar-ex1-collapse">看起来像<div class="collapse navbar-collapse navbar-ex1-collapse" id="my_nav">，切换按钮的属性为data-target="#my_nav"。

Answer 5

确保在bootstrap.cs

之前链接bootstrap-responsive.css

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

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

Answer 6

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

Answer 7

我正在使用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>

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

7 个答案: