Foros del Web » Creando para Internet » CSS »

Diseño se descuadra

Estas en el tema de Diseño se descuadra en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/12/2013, 07:43
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Diseño se descuadra

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.
  #2 (permalink)  
Antiguo 29/12/2013, 14:57
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Responsive Design HTML 5

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

Tendrás que reducir el ancho de los elementos del formulario.
  #3 (permalink)  
Antiguo 31/12/2013, 05:29
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Diseño se descuadra

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.
  #4 (permalink)  
Antiguo 31/12/2013, 06:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Diseño se descuadra

¿Y qué quieres hacer cuando físicamente no haya lugar para que ocupe una linea?
  #5 (permalink)  
Antiguo 31/12/2013, 07:25
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Diseño se descuadra

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

  #6 (permalink)  
Antiguo 31/12/2013, 07:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Diseño se descuadra

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.
  #7 (permalink)  
Antiguo 31/12/2013, 08:38
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Diseño se descuadra

A ya, entiendo, gracias pzin :)
  #8 (permalink)  
Antiguo 03/01/2014, 06:10
 
Fecha de Ingreso: diciembre-2009
Mensajes: 82
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Diseño se descuadra

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.

Etiquetas: design, html, html5, input, responsive, todo, type
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:02.