web-dev-qa-db-fra.com

Problèmes liés à la barre de navigation réactive dans Bootstrap 3

Je n’ai eu aucun problème avec la barre de navigation réactive dans la dernière version de Bootstrap, mais je ne parviens pas à faire fonctionner la version 3. Le bouton bascule apparaît correctement et tout disparaît sauf la marque, mais le bouton ne répond pas aux clics. ( http://getbootstrap.com/components/#navbar-responsive ) Toute aide serait grandement appréciée! Voici le code jusqu'à présent:

<!DOCTYPE html>
<html>
<html lang="en">

    <head>
    <title>Hello World</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <section>   
            <div class="navbar navbar-fixed-top">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href= "#" class="navbar-brand">Brand Name</a>
                <div class="nav-collapse navbar-responsive-collapse collapse">
                    <ul class="nav navbar-nav pull-right">
                        <li class="active "><a href="#">Home</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>   
                </div>  
            </div>
        </section>
twitter-bootstrapnavbartwitter-bootstrap-3
25
user2655858

Je crois que le code ci-dessous produira l'effet que vous recherchez. Plus précisément, il n’existe pas de classe " navbar-responsive-collapse " dans BS3 (voir le fichier "bootstrap.css"). À partir de la version 3, Twitter Bootstrap étant réactif par défaut, de nombreux indicateurs de code de réactivité sont désormais intégrés au framework et ne doivent plus être appelés explicitement.

Voici une version BS3 du menu déroulant aligné à droite:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a href= "#" class="navbar-brand">Brand Name</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav pull-right">
        <li class="active "><a href="#">Home</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>   
</div>
</div>
12
PhilNicholas

Changer ceci: .navbar-responsive-collapse

à ceci: .navbar-collapse

Affiche originale a résolu sa propre question. Afficher une version plus concise ici car cela m'a aidé. La version de PhilNicholas ne fonctionnait pas.

3
KLEW

Twitter Bootstrap utilise le plugin Collapse jquery fourni pour faire basculer le menu de navigation sur les facteurs de forme de l'écran mobile. Votre question concerne une version légèrement ancienne de bootstrap mais reste pertinente. La bascule peut être déclenchée sur un élément en définissant: 

data-toggle="collapse" et data-target="#valid_css_selector_of_target_element". 

Le problème ici est le dernier. En ce qui concerne le fonctionnement du plug-in Collapse, peu importe que vous ayez une classe d'amorçage prédéfinie .navbar-responsive-collapse, la seule chose qui compte ici est que l'élément existe dans votre code HTML. L'existence d'une classe bootstrap aurait toutefois très probablement une incidence sur la façon dont elle est stylée. 

La documentation de bootstrap au moment de l'écriture (et je crois depuis longtemps) montre, via un exemple, l'utilisation de l'utilisation d'un attribut id pour sélectionner l'élément cible; ce que je trouve un peu mieux car il peut y avoir plus d’un élément avec la même classe sur la même page, alors que les identifiants sont uniques dans un document html. Donc, dans votre cas:

<div class="collapse navbar-collapse navbar-ex1-collapse"> ressemblerait à quelque chose comme <div class="collapse navbar-collapse navbar-ex1-collapse" id="my_nav"> et le bouton bascule aurait un attribut data-target="#my_nav".

1
lost-and-found

Bootstrap 3 nécessite jquery.

-> Meilleure pratique pour mettre vos scripts à la fin aussi.

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

1
user3234300

Cela a fonctionné pour moi: j'ai changé .navbar-ex1-collapse en .navbar-collapse.

0
baron5

J'utilise Bootstrap 3.2.0. Ce qui a résolu ce problème pour moi, c’était de changer de version de jQuery. Apparemment, jQuery 1.7.1 n'est pas compatible avec le dernier bootstrap. Après le passage à jQuery 2.0.2, tout allait bien:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
0
Alex W

assurez-vous de lier le bootstrap.cs avant le bootstrap-responsive.css

<link href="css/bootstrap.css" rel="stylesheet" />  
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

https://stackoverflow.com/a/9626716/2127493

0
Azarsa