La barra de navegación es un componente de aplicación importante. Proporciona al usuario los nombres de diferentes secciones de aplicaciones integradas con sus enlaces. El usuario se dirigirá a esa parte haciendo clic en estos enlaces de sección. Bootstrap proporciona muchas clases para crear la barra de navegación. Más específicamente, algunas clases de arranque ayudan a ajustar la posición de la barra de navegación.

Este artículo explicará cómo hacer que la barra de navegación fija no se estire del contenedor.

Cómo hacer una barra de navegación de Top Forsed?

El "de colorLa clase se utiliza para hacer que la barra de navegación se fije en la parte superior de la ventana gráfica. Tiene un CSS predefinido "posición"Propiedad con el valor"fijado"Con algunas otras propiedades.

Ejemplo

Implementemos el "de color"Clase para el Navbar y ver su efecto:

• Primero, agregue un "
• Incluya el logotipo utilizando el "marina de navicar" clase.
• Luego, agregue el "Elemento para crear un botón. Esto se mostrará en la pantalla cuando se reduzca la pantalla significa que todos los elementos se colapsarán, lo que se aplica utilizando el "toggle de datos"Atributo con el valor"colapsar". Al hacer clic en el botón, los elementos de Navbar se mostrarán como un menú.
• Especifica el ""Elemento con el"colapsar" y "cañón naval"Clases.
• Agregue los elementos de Navbar en forma de una lista desordenada.
• Luego, haga la barra de búsqueda usando el "" elemento.

Html

Hasta ahora, hemos creado una barra de navegación. Ahora, agregemos algún contenido a la página web:

Bienvenido a Linuxhint

Linuxhint ofrece los artículos y videos de la mejor calidad.

Ver más

Puede observar en el siguiente GIF la posición de la barra de navegación se fija en la parte superior de la ventana gráfica:

Desde el siguiente GIF, se puede ver que, al aumentar o disminuir el tamaño de la pantalla, la barra de navegación se estira en consecuencia:

La siguiente sección demostrará cómo hacer que la barra de navegación fija se mantenga en el contenedor y no se estire con la ayuda de ejemplos prácticos.

Cómo hacer que la barra de navegación de la parte superior no se estire del contenedor?

Bootstrap "envaseLa clase ofrece un contenedor de ancho fijo receptivo. Esta clase ayuda a la barra de navegación a permanecer en un recipiente y evita su estiramiento.

Ejemplo

Asignar el "envase"Clase para el"