estoy haciendo una barra de navegación con Bootstrap, dentro del framework de Spring Boot, La cual les envió:
HTML
<header th:fragment="header">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand text-white">SILOCK</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active pull-right"><a class="nav-link text-white">
<span class="fa fa-home"></span> Inicio
</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Casillero</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Compartimiento</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Compartimiento-Empleado</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Empleado</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Departamento</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Empresa</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Usuario</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Rol</a></li>
<li class="nav-item"><a class="nav-link" href="#about"
th:href="@{/}">Perfil</a></li>
<li class="nav-item active pull-right"><a class="nav-link text-white">
<span class="fa fa-user"></span> Sesion
</a></li>
</ul>
</div>
</nav>
</header>
CSS:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
left: 0;
top: 0;
position: fixed;
}
.navbar-nav {
width: 100%;
text-align: center;
background: #222222;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.nav-item::after {
content: '';
display: block;
width: 0px;
height: 2px;
background: #17a2b8;
transition: 0.2s;
}
.nav-item:hover::after {
width: 100%;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link,
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
{
color: white;
}
.nav-link {
padding: 5px 15px;
transition: 0.2s;
}
Ahora, vengo a pedirles que en mi barra de navegación deseo tener el <li>inicio</li>
en la esquina izquierda, <li>Sesión</li>
en la esquina derecha y <li>Casillero</li>
, <li>Compartimiento</li>
, <li>Compartimiento-Empleado</li>
, <li>Empleado</li>
, <li>Departamento</li>
, <li>Empresa</li>
, <li>Usuario</li>
, <li>Rol</li>
y <li>Perfil</li>
centrado. Muchas gracias.