Saltar al contenido

¿Cómo se reduce la altura de la barra de navegación en Bootstrap 4?

Solución:

Disminuir la altura de la barra de navegación es más fácil en Bootstrap 4 usando las utilidades de espaciado. La altura de la barra de navegación proviene del relleno en el contenido de la barra de navegación.

Solo usa py-0 en el nav-link y navbar-text..

<nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded ">
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-upload"></span> Input Data From Prior Month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link py-0">
                    <span class="icon icon18 icon-excel-file"></span> Export to Excel
                </a>
            </li>
        </ul>
        <span class="navbar-text py-0 color-blue">
        *Data Automatically pulled from sources
      </span>
    </div>
</nav>

los py-0 conjuntos de clases padding-top:0;padding-bottom:0 en los artículos.

Altura de encogimiento de la barra de navegación Bootstrap 4

Si a alguien le gusta cambiar CSS para obtener el mismo resultado, pruebe este método. En mi caso acabo de cambiar el .navbar min-height y los enlaces font-size y disminuyó la barra de navegación.

Por ejemplo:

.navbar{
    min-height:12px;
}
.navbar  a {
    font-size: 11.2px;
}

Y esto también funcionó para aumentar la altura de la barra de navegación.

Esto también ayuda a cambiar el tamaño de la barra de navegación cuando se desplaza hacia abajo en el navegador.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *