Foros del Web » Creando para Internet » CSS »

Comportamiento extraño grid bootstrap

Estas en el tema de Comportamiento extraño grid bootstrap en el foro de CSS en Foros del Web. Hola, En primer lugar, un placer compartir este foro con todos vosotros. Me gustaría comentaros algunas dudas que me deja la rejilla de bootstrap, que ...
  #1 (permalink)  
Antiguo 08/07/2015, 04:57
 
Fecha de Ingreso: julio-2015
Mensajes: 9
Antigüedad: 8 años, 9 meses
Puntos: 0
Comportamiento extraño grid bootstrap

Hola,

En primer lugar, un placer compartir este foro con todos vosotros.

Me gustaría comentaros algunas dudas que me deja la rejilla de bootstrap, que me gusta mucho, pero que no termino de dejar perfecta.

Los problemas llegan cuando no se sabe el número de elementos que se insertarán en la rejilla, por lo que no se sabe cuantas filas habrá.
En el caso de que en cada celda haya solamente una foto, el comportamiento es perfecto, ya que todas miden lo mismo exactamente, pero cuando hay varias partes dentro del mismo <div>, el comportamiento ya no es el deseado en algunos momentos, quedando filas incompletas o comenzando en lugares incorrectos. Os pongo alguna imagen para verlo mejor:

Caso 1: Row incompleta.

Como vemos en la imagen, el texto de la primera celda es más largo de lo normal, por lo que la siguiente celda pasa a la fila de abajo. En el caso de ponerle "wrap" al texto, pasa a ser un "Caso 2" como el que veremos a continuación.


Caso 2: Celdas con distintas alturas hacen que la siguiente fila comience incorrectamente.

En este caso, cuando el texto no ocupa las mismas lineas en todos los divs la rejilla se descoloca.
Para solucionar esto he probado a ponerle un min-height al contenedor del texto, pero para mi gusto deja de ser un diseño adaptable en el momento en el que hay que forzar propiedades CSS para intentar que el resultado sea aceptable (si se considera eso aceptable... si pensamos en un texto de una palabra y el siguiente de 8, el resultado sería horrible...)

Espero haber explicado todo bien y que se me pueda entender.

Un saludo y muchas gracias a todos.
  #2 (permalink)  
Antiguo 08/07/2015, 07:34
Avatar de luisdavid1993  
Fecha de Ingreso: julio-2015
Ubicación: Anaco Venezuela
Mensajes: 78
Antigüedad: 8 años, 9 meses
Puntos: 2
Respuesta: Comportamiento extraño grid bootstrap

Las imágenes están dentro de una tabla con sus respectivos tr y td?
  #3 (permalink)  
Antiguo 09/07/2015, 01:59
 
Fecha de Ingreso: julio-2015
Mensajes: 9
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Comportamiento extraño grid bootstrap

Hola,

No sé si he entendido bien. Las imágenes no están metidas en ninguna tabla, y si pusiera tablas dejaría de ser adaptable, ¿no?

Por ejemplo, si tenemos un:

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

¿Cuándo pongo el <tr> en este caso, si habrá distinto número de filas según el tamaño de la ventana?

Saludos.
  #4 (permalink)  
Antiguo 21/07/2015, 05:15
 
Fecha de Ingreso: julio-2015
Mensajes: 9
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Comportamiento extraño grid bootstrap

Hola de nuevo!

He estado haciendo todo tipo de pruebas y la única manera que encuentro es determinar una altura fija, y que esa altura vaya cambiando según la resolución, pero aún aceptando malas prácticas, sigue sin dar solución a mi pregunta, ya que si coges la información de la base de datos no se puede saber cual es el <div> que ocupará más, por lo que sólo se me ocurre calcular la longitud de la información obtenida de la base de datos, y me parece una locura cuando eso debería hacerlo Bootstrap directamente.

¿Veis que se me esté escapando algo?

Un saludo y gracias!!
  #5 (permalink)  
Antiguo 26/07/2015, 13:06
 
Fecha de Ingreso: agosto-2013
Ubicación: A Coruña
Mensajes: 54
Antigüedad: 10 años, 8 meses
Puntos: 14
Respuesta: Comportamiento extraño grid bootstrap

Hola. El problema es que Bootstrap crea filas de un tamaño determinado por lo que si una columna es mayor que la propia fila lo que hace es exactamente eso, mandarla a la fila siguiente por lo que crea un desorden completo al alterar la colocación.
No hay manera de que cada fila se adapte al tamaño de cada columna porque es todo un bloque.
Soluciones:
1.- Establecer un alto fijo para que no cree el salto y pueda coger cada columna en su fila.
Problema: Si tienen menos elementos, el espacio va a ser bastante considerable quedando mal a nivel visual.
2.- Utilizar "Masonry" para que cada columna se adapte perfectamente sin importar el tamaño. http://masonry.desandro.com/. Es javascript, pero ahora mismo es lo que se me ocurre.

Un saludo y espero haberte ayudado
  #6 (permalink)  
Antiguo 27/07/2015, 03:44
 
Fecha de Ingreso: julio-2015
Mensajes: 9
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Comportamiento extraño grid bootstrap

Hola!

Muchas gracias, miraré eso de masonry.desandro, que la verdad es que no lo conozco, y luego comento algo.

Saludos y gracias!
  #7 (permalink)  
Antiguo 07/08/2015, 05:45
 
Fecha de Ingreso: julio-2015
Mensajes: 9
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Comportamiento extraño grid bootstrap

Bueno, he estado haciendo unas pruebas y con esta herramienta creo que se puede dejar con la disposición esperada, pero para lo que yo busco (lo básico) lo veo demasiado trabajo, ya que solamente quiero disponer todos los elementos en un listado sin que se descoloquen, y eso es poco para lo que ofrece masonry.

En fin, sigo sin entender como pasa ésto, cuando se supone que bootstrap está pensado para que el diseño sea adaptable y se comporte bien al cambiar la resolución, y resulta que para que el resultado sea "correcto" hay que modificar manualmente el CSS.

Saludos!!

Etiquetas: adaptable, bootstrap, diseño, grid, responsive
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 15:41.