3

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

首先是我的头部分，其中“模板”文件是我的自定义文件：

<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 顶部的三行整行。当它低于 940px 时，我也没有通过 chrome 控制台看到任何错误......有什么想法吗？

4

1 回答 1

6

这是我为您创建的 Jsfiddle -http://jsfiddle.net/shail/F4NfT/10/工作！

<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>
于 2013-02-14T02:26:48.347 回答