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
    el 10 sep. 2018 a las 20:44

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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