0

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <%=title%>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="basicExampleNav">
                <ul class="navbar-nav ms-auto  ">
                    <li class="nav-item">
                        <a class="nav-link active" href="/"> <i class="fas fa-home"></i> Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about"><i class="fas fa-building"></i> About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact"><i class="fas fa-envelope"></i> Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

estoy viendo un tutorial de como hacer una pagina web con node js y en un momento a través de bootstrap ponen ml-auto lo cual pone los botones home, about y contact a la derecha pero no me lo toma. en algunos foros dice uqe poneiendo mr-auto se arregla pero tampoco funciono. lo ultimo queencontre fue poniendo ms-auto lo cual si lo tira hacía la derecha pero una linea mans abajo que el titulo cuando en realidad dbee estar en el mismo. y la entrar en contact todo se pone mas grande y no se porque. les dejo el codigo ajala puedan ayudarme`

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <%=title%>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="basicExampleNav">
                <ul class="navbar-nav ms-auto  ">
                    <li class="nav-item">
                        <a class="nav-link active" href="/"> <i class="fas fa-home"></i> Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about"><i class="fas fa-building"></i> About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact"><i class="fas fa-envelope"></i> Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>`
4
  • ¿Podrías editar tu pregunta y convertir tu código a snippet (con el botón que indica <>)?
    – padaleiana
    Commented el 31 mar. 2021 a las 0:31
  • hola, ahí hice lo que me pediste, por favor decime si ahi quedó como necesitas
    – sargo
    Commented el 31 mar. 2021 a las 1:44
  • La sugerencia del snippet fue para que puedas importar bootstrap y se pueda reproducir el problema :) ¿Utilizas la versión 4 o la 5?
    – padaleiana
    Commented el 31 mar. 2021 a las 10:56
  • Si utilizas la version 5, ahora se llaman *-start, *-end en lugar de *-right o *-left, es decir: ms-* me-*: getbootstrap.com/docs/5.0/utilities/flex/#auto-margins Commented el 31 mar. 2021 a las 14:54

1 respuesta 1

1

no te funciona porque ese curso (estoy haciendo el mismo curso) que estas haciendo se basa en bootstrap 5. Me paso igual y cuando lo pase a bootstrap 5 me funciono.

Saludos

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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