[SOLUCIONADO] Elementos responsive

[dalfageme]

Hola buenas
Estoy haciendo una web y me gustaría tener 3 bloques en horizontal y si la web se ve desde dispositivos móviles que estos bloques se pusiesen uno debajo del otro y ocupasen el ancho entero de la pantalla
Un saludo!

[pzin]

Pues pones que para ancho largo sea:

Código CSS:

float: left;
width: 33.3%;
 

Y para móviles

Código CSS:

float: none;
width: auto;
 

[dalfageme]

Pero como hago para que se ajuste automáticamente si es móvil?

[pzin]

Usando media-queries.

[AngelKrak]

algo asi amigo?
http://codepen.io/AngelKrak/pen/zGGmpO

[dalfageme]

Si algo asi, bootstrap no tiene una funcion para eso?
Muchas gracias!

[pzin]

Un mal código Angel. No es lo mismo width:auto que width:100%. Que por cierto, deberías de publicar el código aquí en el foro en lugar de publicar solo fuera del foro.

Bootstrap trae su propio sistema de grillas que es responsivo: http://getbootstrap.com/examples/grid/

[AngelKrak]

grax por rectificarme pzin, no sabia las diferencias antes :(

HTML:

Código HTML:

<div class="block1"><span>Bloque 1</span></div>
<div class="block2"><span>Bloque 2</span></div>
<div class="block3"><span>Bloque 3</span></div>
 

CSS:

Código CSS:

div {
  width: 33%;
  height: 150px;
  background: black;
  color: white;
  border-right: 2px white solid;
  float: left;
}
span {
  padding: 6px;
}
 
@media all and (max-width: 612px) {
  div {
    float: none;
    width: auto;
    border-bottom: 2px white solid;
  }
}
 

Online:
http://codepen.io/AngelKrak/pen/zGGmpO

[fede5426]

Lo que tiene bootstrap es que es Mobile First.. dalfageme si no sabes que significa esto, es que trabaja de pantallas de menor a mayor tamaño.. es decir, si aplicas un estilo para móviles, usando por ejemplo col-xs-5, se va a ver así para todos los dispositivos, pero si usas solo col-lg-5, solo va ocupar 5 columnas en pantallas grandes, me explico?

Para tu proyecto, debería quedarte así:

Código HTML:

<div class="row">
  <div class="col-xs-12 col-sm-4"></div>
  <div class="col-xs-12 col-sm-4"></div>
  <div class="col-xs-12 col-sm-4"></div>
</div>
 

Con col-xs-12 indicas que cuando se vea en pantallas de móviles (xs) ocupen todo el ancho de la pantalla.. y con col-sm-4 indicas que en móviles horizontal y el resto de dispositivos (de small en adelante), se vean 3 elementos por fila, es decir que ocupen solo 4 columnas (4 + 4 + 4 = 12 del total de bootstrap).

Soy nuevo en BS, pero de esa manera lo tengo entendido, si me equivoque en algo por favor que alguien me corrija.

Saludos

[dalfageme]

Muchas gracias a todos ya funciona perfectamente! Un saludo

[dalfageme]

Iniciado por pzin

Un mal código Angel. No es lo mismo width:auto que width:100%. Que por cierto, deberías de publicar el código aquí en el foro en lugar de publicar solo fuera del foro.

Bootstrap trae su propio sistema de grillas que es responsivo: [url]http://getbootstrap.com/examples/grid/[/url]

Una última duda, como puedo añadirle un margin? Es que al hacerlo el último bloque se baja a la siguiente línea?

[fede5426]

Si usaste "width:33%;" bajale el valor.. Anda probando 32% 31% .. Al ocupar cada bloque el 33% de los pixeles, suman 99%, si agregas un margen son mas pixeles que cubrir y solo te queda el 1%. Por eso, bajale el valor hasta que se acomoden.