Question

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

首先是我的头部，＆＃39;模板＆＃39;文件是我的自定义文件：

<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时......或者任何想法？

Answer 1

这是我为你创建的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>

Bootstrap响应式导航栏不会崩溃

1 个答案: