html - Bootstrap 响应式导航栏不会折叠

标签 html css twitter-bootstrap responsive-design navbar

好吧,我几乎直接从文档中删除了这个,但似乎没有任何效果(实际上我现在直接翻录他们的 html,而不仅仅是示例)。

首先是我的头部部分,其中"template"文件是我的自定义文件:

<head>
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/assets/responsive_template/css/bootstrap.css" rel="stylesheet">
<link href="/assets/responsive_template/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/responsive_template/css/template.css" rel="stylesheet">

<script src="/assets/responsive_template/js/jquery.js"></script>
<script src="/assets/responsive_template/js/jquery-ui-1.10.0.min.js"></script>
<script src="/assets/responsive_template/js/bootstrap.js"></script>
<script src="/assets/responsive_template/js/template.js"></script>
</head>

现在是实际的导航栏部分:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Prototype</a>
            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                    <li><a id="back-button" href="#">Back</a></li>
                    <li><a id="submit-button" href="#">Submit</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

但是运行这个没有任何崩溃......它只占用了我 iPhone 顶部的整整三行。当 chrome 控制台低于 940px 时,我也没有看到任何错误...有什么想法吗?

最佳答案

这是我为您创建的 Jsfiddle - <a href="http://jsfiddle.net/shail/F4NfT/10/" rel="noreferrer noopener nofollow">http://jsfiddle.net/shail/F4NfT/10/</a>在职的 !

<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>

    <div class="navbar">
<div class="navbar-inner">
<div class="container">

<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>

<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

</div>
</div>
</div>

关于html - Bootstrap 响应式导航栏不会折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14865665/

相关文章:

html - 使用 css 伪选择器的正确方法?

css - 为什么溢出在这里不起作用?

html - 如何让按钮和计数框内联到容器的整个宽度,无论宽度如何?

html - 位置模态以 float 外框为中心

javascript - document.getElementById() - 未定义

python - Python 中的 KeyError |如何在 Python 中为动态数据并排制作两个 div

javascript - 有没有办法只接受字母而不接受数字作为输入?如果给出数字,它应该显示验证错误,因为它只需要字母

html - 鼠标悬停事件不起作用

html - Twitter Bootstrap - 按钮不呈现

html - 如何将链接添加到与 Bootstrap 内联的标题元素?