web-dev-qa-db-fra.com

Bootstrap 4 navbar-toggler-icon n'apparaît pas

Visite: https://jsfiddle.net/8tpm4z00/

<div class="container">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>

  <a href="#" class="navbar-brand">KP</a>

  <div class="collapse navbar-collapse" id="myNavigation">
      <div class="navbar-nav">
        <a class="p-3 nav-item nav-link active " href="#">Home</a>
        <a class="p-3 nav-item nav-link " href="#">About</a>
        <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
      </div><!-- <div class="navbar-nav"> -->
  </div><!-- <div class="collapse navbar-collapse"> -->

</div><!-- <div class="container"> -->

Le .navbar-toggler-icon n'apparaît pas sur le bouton navbar-toggler lorsque le menu est réduit pour une réactivité mobile.

J'ai recherché ce problème et ajusté les liens jquery et bootstrap également. En plaçant le lien jquery au-dessus des liens bootstrap 4). Mais cela ne semble pas Les bibliothèques externes sont liées dans mon HTML dans le même ordre que le jsfiddle.

javascriptjqueryhtmlcsstwitter-bootstrap
17
Kinder Cappy

Mise à jour:

navbar-inverse n'est plus disponible en version B4, vous pouvez utiliser navbar-dark au lieu.

Utilisation navbar-inverse bg-inverse au lieu de .navbar-default

<section role="navigation">
  <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm fixed-top"><!-- navbar-inverse -->

    <div class="container">

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myNavigation" aria-controls="myNavigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>

      <a href="#" class="navbar-brand">KP</a>

      <div class="collapse navbar-collapse" id="myNavigation">
          <div class="navbar-nav">
            <a class="p-3 nav-item nav-link active " href="#">Home</a>
            <a class="p-3 nav-item nav-link " href="#">About</a>
            <a class="p-3 nav-item nav-link " href="#">Contact Me</a>
          </div><!-- <div class="navbar-nav"> -->
      </div><!-- <div class="collapse navbar-collapse"> -->

    </div><!-- <div class="container"> -->

  </nav>
</section>

violon mis à jour

10
Abhishek Pandey

Si vous utilisez bootstrap 4 beta:

Vous pouvez uniquement ajouter la classe navbar-dark dans la balise nav .

Résultat:

<nav class = "navbar navbar-expand-lg navbar-dark fixed-top navbar-default" role = "navigation">
     <a class="navbar-brand" href="#">
         <img class = "img-responsive logo" src = "~/Content/Images/ogo__160x36.png" alt = "" />
     </a>
     <button type = "button" class = "navbar-toggler" data-toggle = "collapse" data-target = "#menuPrincipal" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation ">
         <span class = "navbar-toggler-icon"> </ span>
     </button>
     <div class="collapse navbar-collapse" ...>...</div>
</nav>
11
Pekee

si vous n'utilisez pas navbar-light ou dark set background-img une image dans .navbar-toggler-icon comme suit

.navbar-toggler-icon {
background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000…p='round' stroke-miterlimit='10' d='M47h22M4 15h22M423h22'/%3e%3c/svg%3e);
}

ou utilisez les fa-bars de la police awsome

2
Moaz Salem

Utilisez navbar-dark à la place pour navbar-dark et bg-dark également au lieu de bg-inverse

  <nav class="navbar navbar-dark navbar-expand-md bg-dark ">
1
Manikant jha