0

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

在此处输入图像描述 在此处输入图像描述

我已相应地添加了css文件和js文件，但它不起作用。就这样结束了。GUI实际上工作正常。但是，没有任何扩展可以显示我拥有的其他两个选项，如上图所示。当我单击扩展程序时没有任何反应。

在此处输入图像描述

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

<!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 文件。

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

在此处输入图像描述

我也从这个链接下载了引导程序

任何帮助和帮助将不胜感激。

谢谢。

PS：如下图所示，我的webapp中已经有了自己的深灰色导航栏。我想知道是否可以将 twitterbootstrap 和我现有的导航栏集成在一起？

更新

对不起。我最初的帖子遗漏了一些重要的东西，例如我在 Visual Studio2012 中的 asp 母版页与我的 CSS 之间的链接。然而，尽管添加了必要的 css，但引导程序中的扩展不能正常工作。

4

2 回答 2

1


您忘记了文档类型，并且 bootstrap.css 没有链接。
您应该查看引导程序网站。（参见以下链接）
引导程序的基本模板

您应该尝试类似：我的代码（我无法将其粘贴到此处，发生错误）。

看看Bootstrap - 组件

于 2013-07-22T08:23:25.373 回答
0

CSS 不加载；可以通过打开 Developer Console > Network 来证明。

删除您周围的标签style.css。

于 2013-07-22T07:53:50.857 回答