Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Alinear 7 imagenes en un grid Bootstrap

Estas en el tema de Alinear 7 imagenes en un grid Bootstrap en el foro de HTML en Foros del Web. Buenas a todo, estoy creando una pagina web con bootstrap pero tengo inconvenientes a la hora de alinear unas imagenes en un mismo div. la ...
  #1 (permalink)  
Antiguo 25/05/2016, 17:58
 
Fecha de Ingreso: mayo-2016
Mensajes: 2
Antigüedad: 7 años, 11 meses
Puntos: 0
Alinear 7 imagenes en un grid Bootstrap

Buenas a todo,

estoy creando una pagina web con bootstrap pero tengo inconvenientes a la hora de alinear unas imagenes en un mismo div.



la idea es que se vean asi pero como son 7 bootstrap solo me alinea 6 y la otra la baja como se ve en la siguiente imagen



este es el codigo que estoy usando:

Código:
<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Restaurantes Saludables"><img class="img-responsive" src="images/categorias/Restaurantes saludables.png" alt=""></a>
					</div>
				</div>
				<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Mercados Saludables"><img class="img-responsive" src="images/categorias/Mercados saludables.png" alt=""></a>
					</div>
				</div>
				<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Gimnasios"><img class="img-responsive" src="images/categorias/Gimnasios.png" alt=""></a>
					</div>
				</div>
				<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Centros de Estetica y Belleza"><img class="img-responsive" src="images/categorias/Centros de estetica y belleza.png" alt=""></a>
					</div>
				</div>
				<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Productos Saludables"><img class="img-responsive" src="images/categorias/Productos saludables.png" alt=""></a>
					</div>
				</div>
				<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Moda Fitness"><img class="img-responsive" src="images/categorias/Moda Fitness.png" alt=""></a>
					</div>
				</div>
				<div class="col-md-2 gallery-grid">
					<div class="project-eff">
						<a href="beneficios.php?param=Mas"><img class="img-responsive" src="images/categorias/Mas.png" alt=""></a>
					</div>
				</div>
Espero me puedan ayudar a resolver esta duda.

Gracias
  #2 (permalink)  
Antiguo 25/05/2016, 20:20
 
Fecha de Ingreso: julio-2013
Mensajes: 14
Antigüedad: 10 años, 9 meses
Puntos: 3
Respuesta: Alinear 7 imagenes en un grid Bootstrap

No he usado mucho bootstrap pero tengo entendido que la suma de las coumnas del grid debe ser igual a 12 que es el grid configurado por defecto y como tienes 7 imagenes cada una ocupando dos cuadros del grid es igual a 14 y por eso la imagen se te desplaza hacia abajo...
  #3 (permalink)  
Antiguo 26/05/2016, 01:30
 
Fecha de Ingreso: abril-2015
Mensajes: 189
Antigüedad: 9 años
Puntos: 14
Respuesta: Alinear 7 imagenes en un grid Bootstrap

Es un poco complicado si , por eso de que el maximo es 12 y con columnas de 2 solo llegas a 6 y con las de 1 te quedas corto.

Creo que esta solución te vale:

https://codepen.io/knitevision1/pen/BAFmk

No es mia pero creo que es lo que buscas, le da a cada columna un 14% de ancho que es el resultado de dividir el 100 entre 7.
  #4 (permalink)  
Antiguo 26/05/2016, 18:19
 
Fecha de Ingreso: mayo-2016
Mensajes: 2
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Alinear 7 imagenes en un grid Bootstrap

Muchas gracias, me funcionó con la solucion del amigo javy7v.

Etiquetas: bootstrap
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 17:57.