Responsive NavBar isn't showing anything when it's resized to a smaller size

StackOverflow https://stackoverflow.com/questions/20087214

문제

I've got Bootstrap v 2.3.2 and i wanted to make a responsive navigation bar. I already built my navegation bar and when it's resize to a smaller size and i clicked on the "button" that is formed when it gets smaller it doesn't show anything! Here is my code:

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

I'm so awesome of what BootStrap can do but it's killing me! damn! anyone who could help with this i'll be more than glad! XD

Here is how it looks: enter image description here

도움이 되었습니까?

해결책 3

Well guys i couldn't find any solution at the entire web so i decided to download a bootstrap template and compared my code with it so i found out that i needed to add some files at the head and at the bottom of my page:

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

Well i don't know why it work with this only... but it worked which is what it really matters! jaja also i'd like to share that you've got to write those libraries exactly in the same order or it won't work!... imma post also the files so you can download them in case you have the same problem, here is the link: Codigo y archivos

다른 팁

I has similar problem with v3 and I had been used navbar inside (asp.net) after few hours of investigating I put navbar above this form runat and all works well.... I see your code and you dont use form tag.. but maybe this can be useful to others

I have the solution for this Check this fiddle

This means the error is not in the HTML

Try including this css

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

and this JS

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

Make sure you have the correct dependencies for bootstrap

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top