1485 sujets

Web Mobile et responsive web design

bonsoir a tous
je viens de me lancer avec boostrap
j ai donc créer un navbar tout ce qu il y a de plus banal avec un exemple du site de boostrap
et j essaye d indiquer a droite de cette navbar 3 liens vers la connexion , la déconnexion et l inscription
tout fonctionne bien jusqu a un certain moment
ou mes 3 liens se mélangent entre eux
je vous donnes ce morceau de code

afin de tenter de m aider


<nav class="navbar navbar-expand-lg navbar-dark bg-dark"style="width:90%;margin:auto;margin-top: 0.5%">
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample06">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Acceuil <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Mon histoire</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">Ma technique</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">Mon blog</a>
      </li>
	  <li class="nav-item">
        <a class="nav-link" href="#">boutique</a>
      </li>
	   <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
	
	</ul>
	   <div class="droite"style="width:30%;float:right;">
    <span class="navbar-text"style="width:30%;margin-right: 2%;">
      <a href="https://www.google.fr" target="_blank">Inscription</a>
</span>
	<span class="navbar-text"style="width:30%;margin-right: 2%;margin-left:2%;">
      <a href="https://www.google.fr" target="_blank">Connection</a></span>
	  <span class="navbar-text"style="width:30%;margin-right: 2%">
      <a href="https://www.google.fr" target="_blank">Deconnexion</a>
    </span>
	</div>
  </div>
 
</nav>
Modérateur
Salut,

Ca donne juste ça : https://jsfiddle.net/undless/9rtevhaq/1/ ? Ou tu as du code en plus ? Parceque c'est pas aligné a droite la...

Quand tu dis que les liens se mélangent c'est ça ?
upload/1610723468-42161-capture.jpg

C'est qu'il n'y a pas assez de place en largeur pour tout faire rentrer. Et si tu diminue juste un peu plus ton menu mobile arrive. Il faut faire apparaitre le menu mobile plus tôt.
salut
merci pour l aide
j ai fini par trouver
en fait il fallait créer juste ceci avant le </nav>
 <ul class="navbar-nav ml-auto">
   
          
		  
		  <button type="button" class="btn btn-info"><a class="nav-link" href="#">Inscription</a></button>
		  <button type="button" class="btn btn-success"><a class="nav-link" href="#">deconnexion </a></button>
		 <button type="button" class="btn btn-primary"><a class="nav-link" href="#">connexion</a></button>
         </ul>
Meilleure solution