2
votes

nav navbar-nav non disponible?

<html>

<head>
  <title>Bootstrap Navbars</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
    	        <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">Koffee</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-nav-demo">
        <ul class="nav navbar-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Login</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

Le code nav navbar-nav ne fonctionne plus dans la version bootstrap 4>? ce code fonctionne-t-il uniquement avec bootstrap 3? J'ai pris le code pour navbar-nav d'un ancien programme. Ordre je ne comprends pas que je me trompe, toute aide serait très utile

html bootstrap-4

0 commentaires

3 Réponses :

0
votes

Bien sûr, Bootstrap 4 / 4.1x prend en charge navbar-nav

Utilisez navbar-light / navbar-dark au lieu de navbar-default . suivez ce lien

0 commentaires

1
votes

Veuillez lire la documentation sur la migration pour découvrir les différences entre bootstrap v3 et v4. Il y a quelques changements importants pour navbar !

Ce qui suit fonctionnerait pour bootstrap4:

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container">
        <a href="#" class="navbar-brand">Koffee</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#bs-nav-demo">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="bs-nav-demo">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">Sign Up</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

démo: https://jsfiddle.net/davidliang2008/6a3p7t2r/12/

Il y a des changements pour navbar, toggler, nav , navbar-nav, etc. Je vous encourage vivement à consulter la documentation de Bootstrap!

2 commentaires

juste une chose .. comment cela s'inscrit-il et la connexion est apparue sur le côté droit ??

Voir la classe mr-auto ? Cela signifie une marge automatique à droite. Dans bootstrap4, de nombreux éléments sont conçus comme flexbox. Dans ce cas, le navbar-collapse est affiché en tant que flexbox. Ces deux navbar-nav sont les enfants de la flexbox. Et si vous appliquez des marges à un enfant flexbox, cet enfant étendra automatiquement sa marge pour occuper l'espace supplémentaire dans le conteneur flexbox dans la direction spécifiée. Ici, puisque nous appliquons la marge automatique à droite, le premier navbar-nav occupera donc tous les espaces supplémentaires à droite jusqu'à ce qu'il ne puisse pas, où le deuxième navbar-nav est affiché.

0
votes

Essayez l'un de ceux-ci:

<nav class="navbar navbar-default">  <!-- Bootstrap 3 -->

au lieu de:

<nav class="navbar navbar-light">  <!-- Bootstrap 4 -->
<nav class="navbar navbar-dark">  <!-- Bootstrap 4 -->

Vous remarquerez peut-être maintenant la différence entre BS3 et BS4. ce n'est pas trop

0 commentaires