gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 22:47:17 25 4
gpt4 key购买 nike

好吧,我几乎直接从文档中删除了这个,但似乎没有任何效果(实际上我现在直接翻录他们的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com