Bootstrap3导航移动崩溃在chrome中无法正常工作

时间:2014-10-06 14:34:24

标签: css html5 google-chrome twitter-bootstrap-3

我只是关注一个引导程序教程,但我遇到了一些奇怪的事情。

chrome和safari使用相同的代码显示移动设备崩溃。

我甚至试过'复制并粘贴'!!

这是safari上的移动导航崩溃,这是一个正确的视图。 safari view

但是在chrome上,它只是不起作用。 这与chrome相同。

chrome view

我在控制台上没有错误。 我用bower下载了jquery和bootstrap。

这是html代码。 main.js和main.css只是空文件。 这只是一个非常基本的引导程序......但我不知道为什么...... 我该怎么解决?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Set the viewport so this responsive site displays correctly on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
    <!-- Include bootstrap CSS -->
        <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="/assets/main.css">
</head>
<body>
<!-- Site header and navigation -->
    <header class="top" role="header">
        <div class="container">
            <a href="#" class="navbar-brand pull-left">
                BS3 TUTORIAL
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon glyphicon-align-justify"></span>
            </button>
            <nav class="collapse navbar-collapse" role="navigation">
                <ul class="navbar-nav nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/main.js"></script>
</body>
</html>

0 个答案:

没有答案