Question

努力理解我在这里做错了什么。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Cyborg/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
</head>

<body>

<div id="navigation">

    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <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>
                <a class="brand" href="#">Project Name</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="/home.aspx">HOME</a></li>
                            <li><a href="/news.aspx">NEWS</a></li>
                            <li><a href="/thingstodo.aspx">THINGS TO DO</a></li>
                            <li><a href="/business.aspx">BUSINESS</a></li>
                            <li><a href="/sport.aspx">SPORT</a></li>
                            <li><a href="/villagelife.aspx">VILLAGE LIFE</a></li>
                            <li><a href="/talk.aspx">TALK</a></li>
                        </ul>
                    </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
        </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->
</div>
</body>
<script src="/ajax/libs/jquery/1.9.0/jquery.min.js" />
 <script src="js/bootstrap.min.js" />
</html>

按钮出现在小于940px的@media下，但按钮不会激活！

现在变得非常沮丧，已经按照例子但没有得到任何结果

有什么想法吗？

Answer 1

包含nav-collapse的div必须包含collapse类。此外，还需要自举响应式css，因此请确保其正确放置。

执行以下操作：

<div class="nav-collapse collapse">

确保两个css文件在同一目录中是一个很好的做法，你可以按照以下方式使用它们

<link rel="stylesheet" type="text/css" href="Cyborg/bootstrap.css"> /*here in cyborg directory*/
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">/*put this one in Cyborg as well */

将它放在Cyborg目录中，如下所示：

<link rel="stylesheet" type="text/css" href="Cyborg/bootstrap-responsive.css">

jquery链接似乎也是问题，请使用以下内容：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>

Answer 2

谢谢大家，我刚刚发现了一些相当愚蠢的东西。 Chrome正在开发/＆gt;原则。需要，现在正在工作。

Bootstrap Navbar响应

2 个答案: