Diseño se descuadra

[miguelangel23]

Hola a todos Foros del Web, estoy haciendo una web Responsive Design, usando el Framework Bootstrap Versión 3 y tengo el siguiente problemita:

En la cabecera de mi página quiero colocar tres cajas de texto. Cuando coloco las dos primeras, y voy reduciendo la ventana de mi navegador, el Responsive Design se mantiene, como pueden ver en la siguiente imagen:




Pero, cuando agrego la tercera caja de texto, y reduzco la ventana de mi navegador al mismo tamaño que la imagen anterior, estas tres cajas de texto se bajan :(
Así es como se visualizan:



A qué se puede deber esto ?

A continuación les adjunto la parte del código:

Código HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project Name</a>
        </div>
        <div class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Company" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div> 

Código CSS:

Código:

.navbar-form {
  padding: 10px 15px;
  margin-top: 8px;
  margin-right: -15px;
  margin-bottom: 8px;
  margin-left: -15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .navbar-form .form-control {
    display: inline-block;

  }
  .navbar-form select.form-control {
    width: auto;
  }
  .navbar-form .radio,
  .navbar-form .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-form .radio input[type="radio"],
  .navbar-form .checkbox input[type="checkbox"] {
    float: none;
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .navbar-form .form-group {
    margin-bottom: 5px;
  }
}

@media (min-width: 768px) {
  .navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-form.navbar-right:last-child {
    margin-right: -15px;
  }
}

Espero me puedan ayudar.

[pzin]

Pues será porque el elemento no cabe, y entonces se baja.

Tendrás que reducir el ancho de los elementos del formulario.

[miguelangel23]

Hola pzin, muchas gracias por tu respuesta, tenías razón, me ayudó bastante :) Pero ahora tengo otra pregunta :( A la cabecera le he agregado tres opciones de menú, y un textbox más y he vuelto a achicar la ventana de mi navegador y de nuevo las cajas de texto se bajan, en el tamaño que te muestro en la siguiente imagen:



Hay alguna otra forma de controlar esto? Porque en ventana de tamaño normal se ve bien, luego voy reduciendo un poco, hasta que llego al tamaño que te comento y te muestro en la imagen anterior :( y se descuadra.

Espero no sea mucha molestia esta ayuda.

[pzin]

¿Y qué quieres hacer cuando físicamente no haya lugar para que ocupe una linea?

[miguelangel23]

Mi idea es que en ese tamaño de ventana puedan entrar todo, pero, sino se pudiera, se pudiera mostrar de esta forma:

[pzin]

Entonces ya tienes que usar media-queries. Supongo que Bootstrap vendrá preparado para eso. Así pues tendrás que leer la documentación de Bootstrap.

[miguelangel23]

A ya, entiendo, gracias pzin :)

[miguelangel23]

Hola pzin, soy yo de nuevo, leí sobre media queries y logré subir las cajas de texto :) y en también logré que esa parte de la cabecera se adapte hasta la resolución 800*600, en la cual tengo el sgte problemita: Ver imagen:



Quisiera que en resolución de 800*600 apareciera el botón Toggle (botón que me permite desplegar la parte del menú) De esta manera:



He leído el código y no se que media query utilizar :( para poder hacer la aparición de este botón en esa resolución :(

Espero puedas ayudarme.