0

Muy Buenos días colegas

Estoy empezando a maquetar una tienda online, y tengo el siguiente problema a la hora de alinear tarjetas (card) con bootstrap, me encuentro que si tienen un texto mas largo o corto se des-alinean, y quisiera conocer si alguien tiene alguna idea de como alinearlas a pesar que tengan un texto mas largo o costo que se alinean siempre a la que tiene el texto mas largo. Por el momento para que se alinean correctamente estoy usando saltos
pero sé que eso no es correcto. ¿Alguna sugerencia? Código de una tarjeta ya que estoy usando el mismo para todas.

a.nosubrayado:link{
	text-decoration: none;
	color:#000000;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-4 col-md-6 mb-4">
		<div class="card h-100">
		<div class="contenedor">
			<a href="#" class="nosubrayado"><img class="card-img-top imagen" src="http://www.solerpalau.mx/multimedia/imagenes/categorias/f87127f4aa56f8f6693ec466dd37c15e6f5a666d.jpg" alt="Ventiladores con Rotor Externo">
			</div>
			<div class="card-body">
				<h6 class="card-title">
					Ventiladores Gama Vent-Set
				</h6>
				<small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
			</div>
		</div>
	</div>

ejemplo imagen

2
  • podrías asignarles un height determinado en css. Algo como height:50px !importan; Es importante el importan para q pise el css de bootstrap Commented el 19 ene. 2018 a las 16:15
  • Listo funcionó muchas gracias. :) Commented el 19 ene. 2018 a las 16:33

2 respuestas 2

3

Hay varias opciones para solucionar tu problema, una de ellas es utilizar este plug-in para jquery: https://github.com/liabru/jquery-match-height

Donde se encuentra el contenido, agrega una dummy class: "item-Height"

<div class="card h-100 item-Height">  

Luego de agregar el plug-in, llámalo:

$(function() {
    $('.item-Height').matchHeight();
});

En mi sitio web lo tengo funcionando: http://fredyfx.com/resources

Espero te sea de utilidad.

2
  • Oh genial, también lo probaré. Commented el 19 ene. 2018 a las 16:34
  • eso genera una altura dinámica, dependiendo del elemento más alto de la fila. :)
    – fredyfx
    Commented el 19 ene. 2018 a las 16:39
2

Altura fija para todo tus contenedores

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="col-lg-4 col-md-6 mb-4">
    		<div class="card h-100">
    		<div class="contenedor">
    			<a href="#" class="nosubrayado"><img class="card-img-top imagen" src="http://www.solerpalau.mx/multimedia/imagenes/categorias/f87127f4aa56f8f6693ec466dd37c15e6f5a666d.jpg" alt="Ventiladores con Rotor Externo">
    			</div>
    			<div class="card-body">
    				<h6 class="card-title">
    					Ventiladores Gama Vent-Set
    				</h6>
    				<small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
    			</div>
    		</div>
	</div>
    <div class="col-lg-4 col-md-6 mb-4">
    		<div class="card h-100">
    		<div class="contenedor">
    			<a href="#" class="nosubrayado"><img class="card-img-top imagen" src="http://www.solerpalau.mx/multimedia/imagenes/categorias/f87127f4aa56f8f6693ec466dd37c15e6f5a666d.jpg" alt="Ventiladores con Rotor Externo">
    			</div>
    			<div class="card-body">
    				<h6 class="card-title">
    					Ventiladores Gama Vent-Set Ventiladores Gama Vent-Set Ventiladores Gama Vent-Set
    				</h6>
    				<small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
    			</div>
    		</div>
	</div>
    <div class="col-lg-4 col-md-6 mb-4">
    		<div class="card h-100">
    		<div class="contenedor">
    			<a href="#" class="nosubrayado"><img class="card-img-top imagen" src="http://www.solerpalau.mx/multimedia/imagenes/categorias/f87127f4aa56f8f6693ec466dd37c15e6f5a666d.jpg" alt="Ventiladores con Rotor Externo">
    			</div>
    			<div class="card-body">
    				<h6 class="card-title">
    					Ventiladores Gama Vent-Set Ventiladores Gama Vent-Set
    				</h6>
    				<small class="text-muted">&#9733; &#9733; &#9733; &#9733; &#9734;</small>
    			</div>
    		</div>
	</div>
<style>
    .card {
        height: 180px;
    }
    a.nosubrayado:link{
	text-decoration: none;
	color:#000000;
    }
</style>

1
  • Esto estuvo mejor yo lo estaba aplicando a la imagen pero muchas gracias. Esto me fue de mucha ayuda. Commented el 19 ene. 2018 a las 16:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.