Es importante comprender el código correctamente previamente a usarlo a tu proyecto y si tquieres aportar algo puedes dejarlo en la sección de comentarios.
Solución:
Puede agregar el collapse componente a los enlaces como este ..
Demostración de BS3 utilizando el método de ‘alternancia de datos’
O, (quizás una mejor manera) usa jQuery así ..
$('.navbar-nav>li>a').on('click', function()
$('.navbar-collapse').collapse('hide');
);
Demostración de BS3 usando el método jQuery
Actualización 2019 – Bootstrap 4
La barra de navegación ha cambiado, pero el método “cerrar después de hacer clic” sigue siendo el mismo:
Método jQuery de demostración BS4
Demostración BS4 data-toggle método
Actualización 2021 – Bootstrap 5 (beta)
Use javascript para agregar un detector de eventos de clic en los elementos del menú para cerrar la barra de navegación Contraer.
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) =>
l.addEventListener('click', () => bsCollapse.toggle() )
)
Método de javascript de demostración BS5
O, Utilizar el data-bs-toggle y data-bs-target datos attributes en el marcado de cada enlace para alternar la barra de navegación Contraer …
Datos de demostración BS5attributes método
Estoy usando ANGULAR y dado que me dio problemas, el routerLink simplemente agregue el cambio de datos y el objetivo en la etiqueta li … o use jquery como “ZimSystem”
Puedes llamar $.collapse('hide'); con un controlador de eventos en los enlaces.
$('.nav-link').on('click',function()
$('.navbar-collapse').collapse('hide');
);.navbar-toggler .icon-bar
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
Si te ha sido de provecho nuestro post, nos gustaría que lo compartas con otros juniors y nos ayudes a extender nuestra información.