Question

我在线查看了一个关于创建响应式导航栏的教程，假设看起来像这样

enter image description here

我已经相应地跟着，添加了css文件和js文件，但它无法正常工作。它最终会像这样。 GUI实际上工作正常。但是，没有任何扩展显示另外两个选项我喜欢上面的图片。单击扩展名时没有任何反应。

enter image description here

这是我为响应式导航栏输入代码的方式

<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>iPolice</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server" >
</asp:ContentPlaceHolder>



<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->    
</head>

<body>

<div class="nav bar navbar-fixed-top">
       <div class="navbar-inner">
           <div class ="container">
               <a class ="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                   <span class="icon-th-list"></span>
               </a>
               <a href="#" class="brand">Your Logo</a>

               <div class="nav-collapse colapse">

                   <ul class="nav pull-right">
                       <li class="active"><a href="#">Entry01</a></li>
                       <li><a href="#">Entry02</a></li>
                   </ul>
               </div>
           </div>
       </div>
</div>
<form id="form1" runat="server">


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>    
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js">  </script>

    <div id="ContentPlaceHolder">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    </div>

</form>

    </body>

我很确定我已将我的css和javascript文件添加到正确的位置。

当宽度减小时，我正试图让我的导航栏（下图）在响应式设计下很好地显示。

enter image description here

我还从这个link

下载了引导程序

非常感谢任何帮助和帮助。

感谢。

P.S：如下图所示，我的webapp中已经有了自己的darkgrey导航栏。我想知道是否有可能将twitterbootstrap和我现有的导航栏整合在一起？

更新

对不起。我的最初帖子遗漏了一些重要内容，例如我在Visual studio2012中的asp主页与我的CSS之间的链接。但是，尽管添加了必要的css，但引导程序中的扩展功能不正常。

Answer 1

您忘记了doctype并且bootstrap.css没有链接你应该看一下bootstrap网站。（见以下链接）
Basic template for bootstrap

您应该尝试类似：My code（我无法在此处粘贴，发生错误）。

查看Bootstrap - Component

Answer 2

CSS无法加载;它可以通过打开开发者控制台＆gt;来证明网络

删除style.css周围的标记。

bootstrap没有相应的工作

2 个答案: