1

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.

1 respuesta 1

2

Agrega una clase diferente a los dos elementos, inicio y sesión, dales un

.sesion{
text-align: right;
}
.inicio{
text-align: center;
}

o igualmente con un float ya sea right o center, acuerdate de agregar a los li

<li class="sesion">sesión</li>
1
  • Listo, muchas gracias, funciono tu idea.
    – Reinos Ric
    Commented el 10 sept. 2018 a las 20:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.