0

我有 Bootstrap v 2.3.2，我想制作一个响应式导航栏。我已经建立了我的导航栏，当它调整为更小的尺寸时，我点击了它变小时形成的“按钮”，它没有显示任何东西！这是我的代码：

  `<!DOCTYPE html>
        <html lang="en">
      <head>
        <title>Prueba de Responsive Site</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
      <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
          <div class="container">
    <button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><i class="icon-tasks"></i></button>
           <div class="nav-collapse collapse">
        <ul class="nav pull-right">
         <li class="active"><a href="#">Home</a></li>
         <li ><a href="#">Package</a></li>
         <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" type="button">Matutina
     <i class="caret">
     </i></a>
       <ul class="dropdown-menu"><li><a href="#"> </a>Prueba1</li>                                                                                   <li><a href="#"> </a>Prueba2</li>                                 <li><a href="#"></a>Prueba3</li>                              <li><a href="#"></a>Prueba4</li>                           </ul>
<li ><a href="#">About</a></li>
<li ><a href="#">Now</a></li>
</ul>
</div></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>     <script src="js/bootstrap.js"></script>
</body>
</html>`

我对 BootStrap 可以做的事情太棒了，但它让我很生气！该死！任何可以帮助我的人都会很高兴！XD

这是它的外观： 在此处输入图像描述

4

3 回答 3

0

我与 v3 有类似的问题，经过几个小时的调查后，我在 (asp.net) 中使用了导航栏，我将导航栏放在此表单 runat 上方，一切正常......但也许这对其他人有用

于 2013-11-20T15:15:41.700 回答
0

我有这个的解决方案检查这个小提琴

这意味着错误不在 HTML 中

尝试包括这个 css

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css

而这个 JS

http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

确保您具有正确的引导依赖项

于 2013-11-20T17:51:09.053 回答
0

好吧，伙计们，我在整个网络上找不到任何解决方案，所以我决定下载一个引导模板并将我的代码与它进行比较，所以我发现我需要在页面的头部和底部添加一些文件：

<head>
    <title>Admin Home Page</title>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <link href="vendors/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
    <link href="assets/styles.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>

<body>

<!-- some code here --->

<script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>

</body>

好吧，我不知道为什么它只适用于此……但它确实有效，这才是真正重要的！jaja 我还想分享一下，您必须以完全相同的顺序编写这些库，否则它将无法正常工作！... imma 也发布文件，以便您可以下载它们以防遇到同样的问题，这是链接： Codigo y archivos

于 2013-11-22T01:10:58.387 回答