-1

Tengo un navbar con bootstrap lo que quiero es colocar uno de los elementos a la derecha del todo para que quede como botón de cerrar sesión, pero hasta el momento he estado buscando y no he encontrado una manera de hacerlo, ojalá me puedan ayudar. Sin cambiar mucho de la estructura que ya llevo manejando.

Adjunto el código del navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">JOMAR CONTROL</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Control de Asistencia
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Registro</a>
                    <a class="dropdown-item" href="#">Registros Eliminados</a>
                    <a class="dropdown-item" href="#">Conteo de Asistencias</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Administrador
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Registrar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Empleados
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Registrar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Asistencias
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Ingresar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Cargos
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Ingresar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown pull-left">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Sedes
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Ingresar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item active" style='float: right; text-align: right'>
                <a class="nav-link" href="#">Salir</a>
            </li>
        </ul>
    </div>
</nav>

El que quiero dejar a la derecha del todo es el <a>Salir</a>

Y así se ve.

navbar

Ojalá me puedan ayudar, gracias.

0

1 respuesta 1

1

Lo que podrías hacer es sacar la etiqueta li de Salir de la lista ul y ponerla dentro otra lista ul con la clase ml-auto de esta manera:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">JOMAR CONTROL</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Control de Asistencia
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Registro</a>
                    <a class="dropdown-item" href="#">Registros Eliminados</a>
                    <a class="dropdown-item" href="#">Conteo de Asistencias</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Administrador
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Registrar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Empleados
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Registrar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Asistencias
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Ingresar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Cargos
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Ingresar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
            <li class="nav-item dropdown pull-left">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Sedes
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Listado</a>
                    <a class="dropdown-item" href="#">Ingresar</a>
                    <a class="dropdown-item" href="#">Eliminados</a>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
           <li class="nav-item active">
                <a class="nav-link" href="#">Salir</a>
           </li>
        </ul>
    </div>
</nav>

Espero te sirva.

2
  • Muchas gracias me funcionó con una ligera modificación, pues otro ul con las clases navbar-nav ml-auto y ahi dentro dejé el li tal cual, muchas gracias
    – DaxTter77
    Commented el 6 ago. 2019 a las 17:25
  • 1
    Tienes razón tiene más sentido poner el li dentro de un ul en vez de ponerle simplemente el link a, edité la respuesta para añadir tu modificación.
    – israteneda
    Commented el 6 ago. 2019 a las 17:35

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