Dev Faq
-1
votes

Bootstrap NavBar Icônes non alignées correctement

J'essaie d'ajouter trois icônes au coin droit, la recherche, la cloche de notification et l'utilisateur. Je ne veux pas s'effondrer car cela est pour une application de bureau électronique et la barre NAV doit être corrigée. 

<nav class="navbar navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
            </a></li>
          </ul>
        </nav>

1 commentaires

Est-ce que cela répond à votre question? Bootstrap NavBar avec éléments alignés gauche, centre ou droit

3 Réponses :

1
votes

Donner l'affichage: Inline-Block à la balise UL et LI.

p> 

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link p-2" href="#">
        <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
      </a></li>
      <li class="nav-item"><a class="nav-link p-2" href="#">
        <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
      </a></li>
      <li class="nav-item"><a class="nav-link p-2" href="#">
        <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
      </a></li>
    </ul>
  </nav>

0 commentaires
1
votes

Il y a un Réponse de dépassement de pile que aborde votre problème.

Extraire le code de cette réponse Vous pourrez personnaliser correctement votre barre NAV: P> 

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="navbar-brand" href="#">Navbar</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
              </a></li>
        </ul>
</nav>

0 commentaires
1
votes

sur l'élément ul modifie la classe à juste NAV au lieu de NAVBAR-NAV & Ajouter la classe D-flex xxx

voici une codesandbox où il fonctionne https: / /codesandbox.io/s/weathered-wildflower-86fv8

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor