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

标签 twitter-bootstrap navbar twitter-bootstrap-3

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

最佳答案

我相信下面的代码会产生你想要的效果。具体来说,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>

关于twitter-bootstrap - Bootstrap 3 中响应式导航栏的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18075248/

相关文章:

css - 为什么 col 使我的粘性导航栏不起作用?

CSS如何适应100%的高度和宽度?

Ajax Bootstrap 弹出框 : Object #<Object> has no method 'popover'

jquery - NavBar 有点不稳定(jQuery、html、css)

HTML 将导航栏右对齐,图像适合页面

twitter-bootstrap - bootstrap 4 - 何时使用重启 css 和网格 css?

jquery - 在rails中使用Twitter Bootstrap jquery modal链接到另一个页面

html - 将文本和按钮平行放置

html - 我无法删除网站底部的白色部分

html - 如何更改事件导航丸的颜色?