0

tengo un problema. Quiero que un elemento del navbar este a la derecha pero no puedo encontrar como.

Aca dejo el codigo del nav:

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container">
  {% load static %}
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <a class="navbar-brand pr-5" style="border-right: 1px solid #efefef;" href="{% url "inicio" %}">
      <img src="{% static 'img/logo_muni.png' %}" height="50" class="d-inline-block align-top"/>
    </a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{% url "historia" %}">Historia</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url "autoridades" %}">Autoridades</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url "entidades" %}">Entidades importantes</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url "contacto" %}">Contacto</a>
      </li>
      <li class="nav-item flex-row-reverse">
        <a class="nav-link" href="{% url "login" %}">Iniciar Sesion</a>
      </li>
    </ul>
  </div>
</div>

Y si preguntan, se extiende de un base.html.

1
  • Hola Lucas, ¿podrías añadir lo que has intentado? el 9 may. 2020 a las 10:28

1 respuesta 1

0

puedes usar "navbar-text" para que se acomode a la derecha el elemento

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

U otro ejemplo como este

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

referencia. https://getbootstrap.com/docs/4.4/components/navbar/

Tu Respuesta

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

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