2
votes

Comment déplacer les éléments de la barre de navigation à droite

J'utilise des classes bootstrap et j'ai besoin que le logo soit à gauche mais les éléments de navigation à droite. Pour être réactif également.

https://imgur.com/zL8LrTG navbar maintenant

       <!-- Logo -->
       <a class="navbar-brand" href="#">
           <img class="img-fluid" src="images/header-logo.png" alt="logo">
       </a>

       <!-- Toggler/collapsibe Button -->
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
           <span class="navbar-toggler-icon"></span>
       </button>

       <!-- Nav items -->
       <div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Collapse navbar -->
           <ul class="navbar-nav">
               <li class="nav-item">
                   <a class="nav-link" href="#">Home</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Products</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Services</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="#">Contact</a>
               </li>
           </ul>
       </div>
   </nav>

html css bootstrap-4 frontend

2 commentaires

en haut, j'ai

3 Réponses :

0
votes

Vous pouvez ajouter ml-auto à votre classe ul , ce qui donne à votre ul une marge à gauche de auto . Cela ressemblera à ceci:

1 commentaires

Alors marquez cette réponse comme acceptée.

0
votes

Vous pouvez utiliser float right pour déplacer la barre de navigation vers la droite

#collapsibleNavbar{
 float: right;
 margin: 0 10px 0 0;
}

0 commentaires

0
votes

Vous pouvez essayer ceci:

// CSS code
nav #collapsibleNavbar{
    width: n%; // n = o que achar melhor
    margin: n n;
    display: block;
}
nav #collapsibleNavbar .navbar-nav{
    display: block;
    width: auto; // or what You think is better for your project
    margin: n n;
    float: right;
}

Je pense que vous pouvez essayer cela et encapsuler dans un div votre logo et le bouton Toggler / collapsibe, en définissant div pour flotter à gauche. Vous devrez peut-être ajouter quelques "! Important".

0 commentaires