0

Estoy aprendiendo a usar Bootstrap 5 y a la hora de colocar un navbar tengo problemas para centrar el formulario de búsqueda.
Actualmente está situado a la izquierda después del menú y quiero colocarlo justo en el centro del navbar.

Así se ve ahora:

introducir la descripción de la imagen aquí

Aquí dejo el código:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
                expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
            <ul class="navbar-nav mr-2 ml-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link active" aria-current="page">Iniciar sesión / Registrarse</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
2
  • Para enriquecer un poco la pregunta: ¿dónde deben aparecer el campo y botón de búsqueda cuando se muestra el botón de menú hamburguesa? ¿Dentro del propio menú colapsado o al lado de navbar-link?
    – padaleiana
    Commented el 18 mar. 2021 a las 17:21
  • @padaleiana en principio pensaba ponerlo dentro del menú colapsado quedando primero los ul y por ultimo el campo y botón de búsqueda aunque bien es cierto que está opción nunca llego a convencerme prefiriendo dejarlo fuera del menú colapsado en el centro entre el navbar-brand y el navbar-toggler
    – JPillado
    Commented el 18 mar. 2021 a las 17:47

1 respuesta 1

2

Lo puedes hacer con el css position:absolute, left:50% y right:0% en los elementos de busqueda y login respectivamente. Usando el framework de Bootstrap puedes aprovechar sus clases position-absolute, start-50 y end-0 que son los equivalentes al css mencionado antes.

<!-- Bootstrap 5 css -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<style>
    @media(max-width: 991px){
        .navbar-search, .navbar-login {
            position:static !important;
        }
    }
</style>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
                  expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav">
                  <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                          data-bs-toggle="dropdown" aria-expanded="false">
                          Dropdown
                      </a>
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <li><a class="dropdown-item" href="#">Action</a></li>
                          <li><a class="dropdown-item" href="#">Another action</a></li>
                          <li>
                              <hr class="dropdown-divider">
                          </li>
                          <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
              </ul>
              <form class="navbar-search d-flex position-absolute start-50">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
              </form>
              <ul class="navbar-login navbar-nav mr-2 position-absolute end-0">
                  <li class="nav-item">
                      <a href="#" class="nav-link active" aria-current="page">Iniciar sesión / Registrarse</a>
                  </li>
              </ul>
          </div>
      </div>
  </nav>

  <!-- Bootstrap 5 js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

</body>

2
  • con position-absolute el formulario y el login se descolocan cuando el menú colapsa. Pulsas el botón hamburguesa para mostrar el menú y es ahí donde estos dos elementos están descolocados
    – JPillado
    Commented el 18 mar. 2021 a las 17:13
  • 1
    Lo actualicé añadiendo una @media en css. Presta atención, que añadí una clase nueva a los dos elementos interesados para poder acceder a ellos en el css. Commented el 18 mar. 2021 a las 17:52

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.