1

Mi problema es el siguiente (screenshot)

Quiero que el formulario de búsqueda aparezca al lado del botón del navbar. en diseño web aparece bien, el problema es cuando lo abro desde el móvil adjunto código:

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid p-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-white" id="MenuNav">

      <!--    BOTON DEL NAVBAR -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNav">
        <ul class="navbar-nav ">
          <!-- CONTENIDO DEL NAV -->
        </ul>
      </div>
      <!-- FORM DE BUSQUEDA  -->
      <div class="navbar-nav">
        <form class="form-inline my-2 my-lg-0">
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Ej: SmarTv" aria-describedby="button-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary " type="button" id="button-addon2">Buscar</button>
            </div>
          </div>
        </form>
      </div>
      <!------------------------>
    </nav>
  </div>
</body>

</html>

Espero que me puedan ayudar

2
  • Y si publicas tu codigo an algun sitio como codepen.io ? Commented el 3 sept. 2019 a las 20:56
  • En móvil se ve como tu quieres,. de hecho editaron tu pregunta agregando los link de las librerías y si das en ejecutar podrás ver lo que te comento. Si no, no en tiendo cual es tu problema.
    – vicasas
    Commented el 3 sept. 2019 a las 21:27

1 respuesta 1

0

para evitar que el formulario de busqueda salte a la siguiente linea debes añadir a el navbar la clase flex-nowrap (que evita los saltos de linea) y align-items-baseline (para centrar los elementos).

En tu codigo quedaria asi:

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid p-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-white flex-nowrap align-items-baseline" id="MenuNav">

      <!--    BOTON DEL NAVBAR -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNav">
        <ul class="navbar-nav ">
          <!-- CONTENIDO DEL NAV -->
        </ul>
      </div>
      <!-- FORM DE BUSQUEDA  -->
      <div class="navbar-nav">
        <form class="form-inline my-2 my-lg-0">
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Ej: SmarTv" aria-describedby="button-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary " type="button" id="button-addon2">Buscar</button>
            </div>
          </div>
        </form>
      </div>
      <!------------------------>
    </nav>
  </div>
</body>

</html>

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.