Question

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

  `<!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

以下是它的外观： enter image description here

Answer 1

我有类似的问题与v3和我在内部使用navbar（asp.net）后几个小时的调查我把导航栏放在这个表格runat上面并且一切运行良好....我看到你的代码而你不使用表格标签..但也许这对其他人有用

Answer 2

我有解决方案请检查此fiddle

这意味着错误不在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

确保您具有正确的bootstrap依赖关系

Answer 3

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

<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

响应的NavBar在调整为较小尺寸时不会显示任何内容

3 个答案: