bar réactif de navigation ne fonctionne pas

J'essayer Bootstrap pour la première fois et je base mon code sur leur exemple ici:bar réactif de navigation ne fonctionne pas

http://twitter.github.com/bootstrap/examples/starter-template.html

Je essentiellement copié le contenu principal code html, mais dans ma version la réponse La barre de navigation ne fonctionne pas, en ce sens que lorsque je clique sur le bouton 'hamburger', les éléments nav n'apparaissent pas.

Mon code:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
    <link href="css/main.css" rel="stylesheet" media="screen"> 
    </head> 
    <body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 

    <div class="container"> 

     <h1>Hello, world!</h1> 

    </div> <!-- /container --> 

    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.js"></script> 
    </body> 
</html>

Mes fichiers bootstrap sont de la Bootstrap personnaliser le site. J'ai inclus tout dans la construction, y compris la barre de navigation responsive.

Où est-ce que je me trompe?

Merci à tous.

MISE À JOUR

J'ai enlevé mon dossier main.css donc pas conflit. J'ai essayé à nouveau de télécharger bootstrap à partir de la page de personnalisation avec tout ce qui est coché: twitter.github.com/bootstrap/customize.html et toujours le même problème. Le fichier css qu'il me donne s'appelle simplement bootstrap.css pas bootstrap-combined.css. Y at-il un problème avec bootstraps personnaliser la page ??

Source

2013-02-12 Jamie Fearon

Est-ce définitivement le fichier bootstrap-responsive.css que vous utilisez? –

Le fichier s'appelle simplement bootstrap.css. Il est téléchargé à partir de la page d'amorçage personnalisée avec la réponse active (en fait tout est coché). –

Travaillez-vous toujours sur ce Jamie? –

Check this out: http://jsfiddle.net/panchroma/4XEnD/

Je pris votre code html exacte et je suis en utilisant des versions CDN du CSS et JS - tout semble bon pour moi.

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

Vérifiez bien que vous utilisez le CSS bootstrap réactif, que le dossier du Bootstrap est chargé et qu'il n'y a pas quelque chose dans votre main.css qui est à l'origine d'un conflit.

Bonne chance!

Source

2013-02-12 16:39:13

J'ai supprimé mon fichier main.css donc pas de conflit là-bas. J'ai essayé à nouveau de télécharger bootstrap à partir de la page de personnalisation avec tout ce qui est coché: http://twitter.github.com/bootstrap/customize.html et toujours le même problème. Le fichier css qu'il me donne s'appelle simplement bootstrap.css pas bootstrap-combined.css. Y at-il un problème avec bootstraps personnaliser la page ?? –

Je viens de faire une autre fourche en utilisant le fichier css de la page de personnalisation que vous utilisez: http://jsfiddle.net/panchroma/tBKMj/ ... tout semble toujours bien, donc ce n'est pas la cause. Le problème peut être avec votre fichier js n'est pas chargé. Vérifiez votre chemin ou essayez d'utiliser le lien CDN ci-dessus. –

bar réactif de navigation ne fonctionne pas

Répondre

Questions connexes