Alignement d'éléments dans une barre de navigation

Question

J'ai une barre de navigation avec 3 éléments li. J'ai un quatrième objet que je voudrais aligner le long du côté gauche de la barre. Lorsque j'ajoute le quatrième élément en tant que div dans la barre de navigation, les éléments de 3 li sont décalés vers la droite. J'utilise bootstrap pour styliser la barre de navigation. Voici le balisage:

<nav class="navbar navbar-toggleable-md navbar-inverse"> 
      <ul class="navbar-nav"> 
       <li style="float: left; color: white"> 
        My Text Here 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a> 
       </li> 
      </ul> 
     </nav> 

J'ai essayé d'appliquer des styles sone le quatrième élément, mais ils n'ont aucun effet. Des pointeurs?

Answer 1

Vous pouvez retirer votre premier élément du ul et le placer dans un élément avec la classe navbar-brand qui tire automatiquement vers la gauche et stylise le texte afin qu'il soit visible. Vous pouvez également utiliser les classes navbar-left et navbar-right pour tirer des éléments vers la gauche ou vers la droite.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-toggleable-md navbar-inverse"> 
 
<div class="container"> 
 
    <div class="navbar-header navbar-left"> 
 
    <p class="navbar-brand">My Text Here</p> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 2

Je vous recommande d'utiliser des normes bootstrap fournir. Vous pouvez toujours personnaliser l'ajout de certaines classes. Comme vous le voyez, j'ai ajouté la marque à votre GPS, je pense que c'est ce que vous cherchez.

Vérifiez la deuxième nav, vous pouvez y voir plus de classes utiles. (Consultez l'extrait sur la pleine page).

Vérifiez la troisième nav est comment ajouter votre logo comme img.

.this-is-my-brand { 
 
height:100%; 
 
margin:10px; 
 
font-family:Verdana; 
 
text-shadow:1px 1px 1px #fa8911; 
 
} 
 

 
.logo{ 
 
width:25%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" 
 
     rel="stylesheet"> 
 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  
 
<nav class="navbar navbar-toggleable-md navbar-inverse"> 
 

 
    
 
      
 
      <ul class="navbar-nav"> 
 
      <a class="navbar-brand this-is-my-brand" href="#">Brand</a> 
 
       <li style="float: left; color: white"> 
 
        My Text Here 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" routerLink="/item1" routerLinkActive="active">Item1</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" routerLink="/item2" routerLinkActive="active">Item2</a> 
 
       </li> 
 
       <li class="nav-item"> 
 
        <a class="nav-link" routerLink="/Item3" routerLinkActive="active">Item3</a> 
 
       </li> 
 
        
 
       </li> 
 
      </ul> 
 
     </nav> 
 
     
 
     <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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 class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img class="logo" alt="Brand" src="https://i.stack.imgur.com/MybMA.png"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</nav>