Boostrap Toggle pour Navbar ne s'étendant pas

J'ai passé en revue plusieurs questions répondues à propos de ce problème avec un menu de barre de navigation qui ne fonctionne pas. Et ils n'ont pas aidé avec mon codage actuel. La barre de menus n'est pas en expansion et n'est pas en ligne (en une ligne) en haut de la page.Boostrap Toggle pour Navbar ne s'étendant pas

le menu

ressemble actuellement à ceci:

<nav class="navbar navbar-inverse navbar-fixed-top navtop" role=navigation> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     
 
    <!-- This button allows for mobile navigation, it collapses the navbar on smaller screens, the span class creates the three lines indicating a dropdown menu -->  
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
     <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">CodeMcCoy</a>  
 
    </div> <!--navbar-header --> 
 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
    <li class="active"><a href="#Home"><span class="glyphicon glyphicon-home"></span>Home</a></li> 
 
    <li><a href="#About"><span class="glyphicon glyphicon-user"></span>About</a></li> 
 
    <li><a href="#Portfolio"><span class="glyphicon glyphicon-pushpin"></span>Portfolio</a></li> 
 
    <li><a href="#Contact"><span class="glyphicon glyphicon-envelope"></span>Contact</a></li> 
 
</ul> 
 
    </div> <!--NavHeaderCollapse--> 
 
      </div> <!--container--> 
 
    </nav> <!--navbar -->

Source

2017-08-30 CodeMcCoy

comment allez-vous inclure vos fichiers javascript pour votre projet? – cwanjt

Je suis d'abord enclin à penser qu'il ya des dépendances manquantes pour votre projet, à savoir les fichiers CSS et js pour bootstrap (et probablement aussi jquery). J'ai pris le code que vous avez fourni et le mettre dans un projet codeply que vous pouvez voir here. Tout semble fonctionner correctement.

Source

2017-08-30 22:32:25 cwanjt

Merci beaucoup, j'ai finalement compris et, oui, il me manquait les fichiers js. Cependant, pour la vie de moi je ne peux pas comprendre pourquoi la barre de navigation ne restera pas horizontale. Il a toujours la barre de navigation, quand il n'est pas effondré, en regardant verticalement au lieu de sur la même ligne ... peut-être que je devrais ajouter une ligne div? – CodeMcCoy

La barre de navigation ne reste pas horizontale ... même dans le projet codeply ... Ou voulez-vous que la navigation basculée s'affiche horizontalement? – cwanjt

Il n'est pas horizontal en mode normal, même lorsque l'écran est grand. C'est vertical avec un grand écran avec une barre de navigation BIG en haut pour compenser la verticale. Quand je veux juste qu'il soit horizontal, puis s'effondrer avec un écran plus petit. – CodeMcCoy

Hé si vous utilisez bootstrap 4.0 alpha6 ici est le code pour son navbar

Rendez-vous ici https://v4-alpha.getbootstrap.com/components/navbar/

Hey si vous utilisez bootstrap 4.0 bêta il y a eu quelques changements dans les classes utilisées:

.badge-default to .badge-dark 

.bg-faded to .bg-light 

.bg-inverse to .bg-dark 

.card-block to .card-body 

.card-outline-primary to .border-primary 

.card-outline-secondary to .border-secondary 

.card-outline-success to .border-success 

.card-outline-info to .border-info 

.card-outline-warning to .border-warning 

.card-primary to .bg-primary 

.card-success to .bg-success 

.card-info to .bg-info 

.card-warning to .bg-warning 

.card-danger to .bg-danger 

.hidden-xs-down to .d-none .d-sm-block 

.hidden-sm-down to .d-none .d-md-block 

.hidden-md-down to .d-none .d-lg-block 

.hidden-lg-down to .d-none .d-xl-block 

.hidden-xs-up to .d-none 

.hidden-sm-up to .d-sm-none 

.hidden-md-up to .d-md-none 

.hidden-lg-up to .d-lg-none 

.hidden-xl-up to .d-xl-none 

.navbar-toggleable-sm to .navbar-expand-sm 

.navbar-toggleable-md to .navbar-expand-md 

.navbar-toggleable-lg to .navbar-expand-lg 

.navbar-toggleable-xl to .navbar-expand-xl

cela a été emprunté à https://medium.com/@lukaszholeczek/how-to-upgrade-bootstrap-4-alpha-6-to-bootstrap-4-beta-d43b4210f2a3 J'espère que cela vous aide

Source

2017-08-31 05:49:48

Boostrap Toggle pour Navbar ne s'étendant pas

Répondre

Questions connexes