3

Estaba probando bootstrap y me he topado con esta situación: siguiendo con la demo de la documentación he intentado posicionar el botón de cerrar sesión a la derecha del navbar cuando la pantalla está maximizada (en caso de que el diseño sea responsive o la pantalla sea de x medida y se active el icon de menú debe estar a la izquierda el botón de cerrar sesión) pero por motivos que desconozco, no ha funcionado.

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a class="navbar-brand" href="#" style="color: white;">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" style="background-color: white;">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <form class="form-inline my-2 my-lg-0" method="post" action="@Url.Action(" LogOff ", "Home ")">
      <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
    </form>
  </div>
</nav>

Intenté añadiendo el atributo style="float:right" pero no he conseguido el resultado que esperaba, el botón siempre aparece a la izquierda. ¿Cuál es la manera correcta de hacerlo?

Posteriormente probé con estas dos opciones:

Opción A:

    <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo03">
        <form class="form-inline my-2 my-lg-0" style="float:right;" method="post" action="@Url.Action("LogOff", "Home")">
            <div class="navbar-nav ml-auto">
                <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
            </div>
        </form>
    </div>

Opción B:

Y aplicando el en el <form class="form-inline my-2 my-lg-0"formjustify-content-end" etc>

Si bien estas dos últimas opciones solucionan el problema al achicar la pantalla y mostrar el ícono del menú, el botón de cerrar sesión permanece a la derecha y en este caso quiero que esté a la izquierda.

2
  • 2
    ¿Te referís al botón de cerrar sesión o al toggler?
    – padaleiana
    Commented el 23 mar. 2022 a las 16:45
  • Al de cerrar sesión . Cando la pantalla del navegador esta en modo maximizar tamaño, debe estar a la derecha. Cuando se presiona minimizar tamaño o el diseño sea responsive debe estar a la izquierda debajo de home y se debe mostrar luego de presionado el toggler @padaleiana Commented el 23 mar. 2022 a las 16:53

2 respuestas 2

3

Sencillo: debés agregar la clase ml-auto al form:

Conviene que revises el apartado flex en la documentación de Bootstrap.

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-dark">
  <a class="navbar-brand" href="#" style="color: white;">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" style="background-color: white;">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <form class="form-inline my-2 my-lg-0 ml-auto" method="post" action="@Url.Action(" LogOff ", "Home ")">
      <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
    </form>
  </div>
</nav>

0
2

Puedes hacer lo siguiente:

<div class="div collapse navbar-collapse d-flex justify-content-lg-end justify-content-sm-start" id="navbarTogglerDemo03">
     <form class="form-inline my-2 my-lg-0" method="post" action="@Url.Action(" LogOff ", "Home ")">
           <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Cerrar sesión</button>
     </form>
 </div>

Lo que hacemos es, decirle que el div contenedor que en lg se sitúe a la derecha con justify-content-lg-end mientras que en sm inclusive o menores, se situará a la izquierda.

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.