3

Tengo unas columnas cada una con un contenido, sin embargo como unas tienen más contenido que otras se ven más altas y en general se ve feo, ¿hay alguna forma de igualarlas todas para que tengan una misma altura? Intente ponerles clase que fuera height:100% pero no funciona o no sé si se lo coloqué al que era.

Éste es mi código:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12 text-center">
    <h2 class="text-orange">Nuestros Servicios</h2>
    <hr class="second">
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/comunication.png" alt="Plataformas Customizables">
      <div class="caption">
        <h3>Comunicación, Análisis y apoyo</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sint aperiam illum, sapiente et delectus iusto suscipit sed debitis rem error repellat. Corrupti eius voluptatum voluptatibus enim quasi autem! Nesciunt voluptatibus amet adipisci dolore ullam dicta numquam maxime eos soluta perferendis animi earum quidem, saepe. Repellendus, nostrum, sapiente. Tempore recusandae, rem accusamus, veritatis adipisci quibusdam eum at voluptate tempora eaque error odit eligendi autem sint consequatur sed similique, commodi quasi?
        </p>
        <button class="btn btn-danger">Saber más.</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/custom-web.png" alt="Plataformas Customizables">
      <div class="caption">
        <h3>Plataformas a la medida</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam error eum placeat deleniti animi magnam architecto quidem praesentium maiores alias sequi cum libero omnis nam optio asperiores dignissimos officia aut aliquam, aspernatur sunt fugiat! Commodi quasi dignissimos eos, voluptas debitis repellat magni. Eveniet minima debitis neque! Cum quaerat ducimus, corporis et nemo animi delectus nobis.
        </p>
        <button class="btn btn-danger">Saber más.</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/responsive-icon.png" alt="Diseño Responsivo">
      <div class="caption">
        <h3>Diseño Web a la vanguardia</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi fugiat eum doloremque odit cumque dolores nobis quia voluptas tempora! Pariatur placeat distinctio itaque eius impedit natus suscipit, dignissimos culpa?
        </p>
        <button onclick="alr()" class="btn btn-danger">Saber más.</button>
        <div id="ntf"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-3">
    <div class="thumbnail thumb-shadow">
      <img src="img/document-code.png" alt="Código Documentado">
      <div class="caption">
        <h3>Documentación y enseñanza</h3>
        <p class="text-justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, iste accusamus corporis amet repellat ullam quod, quas magni, vitae in, necessitatibus dolorum esse temporibus hic inventore voluptas saepe at officia aliquid. Voluptates sed nam aperiam, sapiente non expedita ipsa laborum commodi!
        </p>
        <button class="btn btn-danger">Saber más.</button>
      </div>
    </div>
  </div>
</div>

3
  • Tal vez te pueda funcionar esta respuesta stackoverflow.com/questions/11688250/…
    – cignius
    Commented el 31 ene. 2017 a las 20:22
  • Muchas gracias funcionó Commented el 1 feb. 2017 a las 13:44
  • con la opción display flex se alinean de inmediato, pero se pierde la función responsive puesto que todas las columnas se agrupan en una única fila Commented el 13 oct. 2017 a las 15:07

3 respuestas 3

2

Lo que pasa es que cuando usas columnas en Bootstrap, estas no se miden la altura unas dependiendo de las otras.

Existen varias soluciones:

Edit: Encontré una solución más rápida y mejor que funciona bastante bien con FlexBox: Al padre (row), añádele la propiedad de display: flex;. Con eso los demás div dentro tendrán todos el mismo height, pero tendrás que solo incluir en el padre (row) los div que quieres que tengan la misma altura (separar el título de ese div) y adicionalmente, para lograr el efecto visual que deseas al los hijos directos darle el border (col-) o al contenido interior hacerlo a la altura máxima de este, ya que los hijos (-col) son los que se ven afectados por la igualación de altura.

Con Javascript, medir el alto de la columna más alta dentro del padre y ese mismo almacenarlo en una variable y asignárselo con CSS (una clase) al resto de los div.

$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".well").height(maxHeight);
});

Foundation es un Framework al igual que Bootstrap que tiene un script llamado equalizer, que iguala las columnas como tú lo necesitas, siguiendo el método de la solución anterior.

También existe una variante de equalizer para Bootstrap creada por usuarios.

Te dejo el hilo donde lo discute en StackOverflow en ingles:

https://stackoverflow.com/questions/23287206/same-height-column-bootstrap-3-row-responsive

0

Dependiendo de tú proyecto podrías utilizar únicamente la propiedad height:200px,por ejemplo, para establecer el tamaño exacto de cada columna. Si el contenido lo sobrepasa, podrías utilizar:

overflow:auto;
overflow:-x;

Que mostrará un scroll vertical.

-3

en bootstrap 4 a la columna que quieres ampliar la añades class="card border-0"

2
  • 2
    Bienvenido a StackOverflow! Tu respuesta quedaría mucho mejor si la acompañas de un poco de código y ejemplos para que no sea solo texto. Un saludo :)
    – Capt.Teach
    Commented el 18 sept. 2019 a las 8:16
  • Te recomiendo dar una vuelta por el Tour de bienvenida así ves como funciona el sitio, tambien es importante que leas ¿Cómo escribo una buena respuesta? para poder elaborar una buena respuesta. Dicho esto, ademas no creo que esto responda a la pregunta.
    – x3k
    Commented el 18 sept. 2019 a las 8:26

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.