font - title html attribute

Misma columna de altura arranque 3 fila sensible

Question

Hola, tengo cuatro divs en una fila de bootstrap. Quiero que todos los div en esta fila tengan la misma altura y no rompan la responsabilidad. No sé cómo hacer esto sin romper la responsabilidad.

Intenté resolver esto con alturas fijas, pero en términos de capacidad de respuesta, esta es una mala solución.

Gracias :-)

<div class="row">
    <div class="col-md-3 index_div_item">
        <a href="#">
        <div class="well" id="item1">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item2">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>  
        </a>
    </div>    
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item3">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
            </div>
        </a> 
    </div>  
    <div class="col-md-3 index_div_item">
        <a href="#">
            <div class="well" id="item4">
                <h1 class="h1_item"><span class="titre_item">Title</span></h1>
                <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
                <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
            </div>  
        </a>  
    </div>              
</div>

Answer 1

Creo que la respuesta de paulalexandru es bastante buena. Solo agregaría un código para evitar problemas cuando se cambie el tamaño de la ventana. Si el div con la altura más grande contiene una foto, podrías tener problemas cuando el ancho de la imagen cambie porque también cambiará su altura, por lo que en este caso deberías lidiar con el evento de cambio de resize .

$( document ).ready(function() {
    toAdapt();
    window.onresize=function(){toAdapt};       

});


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

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

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

Answer 2

EDITOR 1: Tuve que ayudar a alguien con eso, así que hice un plunkr . Vaya a "script.js" y comente "bootstrap_equalizer ();" función para ver el arranque original, sin columnas de la misma altura.

Sé que esto es un poco tarde, pero estoy seguro de que podría mejorar tu código y ayudar a otros. :)

Como estoy acostumbrado a trabajar con Foundation 5, cuando tengo que trabajar con bootstrap echo de menos el "ecualizador".

Realizo una pequeña función para llamar a las páginas donde tiene que "ecualizar" algunas columnas. Mi código se basa en @paulalexandru respuesta!

function bootstrap_equalizer() {
  $(".equalizer").each(function() {
    var heights = $(this).find(".watch").map(function() {
      return $(this).height();
    }).get(),

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

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

En el lado html, solo necesitas hacer esto:

<div class="container">
   <div class="row equalizer">
      <div class="watch">
         Column 1
      </div>

      <div class="watch">
         Column 2
      </div>
   </div>
</div>

¡la columna 1 y la columna 2 tendrán la misma altura! ¡Por supuesto puede tener más de 2 columnas!

Espero que esto pueda ayudar! =)

Answer 3

FYI - Hice esto para resolver mi problema para incluir puntos de interrupción receptivos que coincidan con los puntos de interrupción en el arranque. (Utilizo LESS variables de bootstrap para sincronizar los puntos de interrupción, pero a continuación se muestra la versión compilada de css)

@media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

luego agregué las clases al padre que se requerían.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Answer 4

Hubo en un momento dado un ejemplo experimental oficial de columnas de altura similar usando CSS flexbox con Bootstrap. Aquí está lo esencial:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Y luego use <div class="row row-eq-height"> lugar de <div class="row"> .

Tenga en cuenta que FlexBox no es compatible con IE <10.

Answer 5

Llego un poco tarde al juego, pero ...

Esto alineará las alturas de los elementos en una fila con una clase de "coincidencia de altura de fila". Coincide con las celdas en función de su valor superior, por lo que si se mueven una debajo de la otra cuando la página se vuelve más pequeña, no configuro la altura.

Sé que hay varias versiones de CSS, pero todas rompen mi diseño.

$(window).resize(function () {
    var rows = $(".row.row-height-matched");

    rows.each(function () {
        var cells = $(this).children("[class^=''col-'']");

        cells.css("height", "");

        var j = [];

        cells.each(function () {
            j.push($(this).offset().top);
        });

        var u = $.unique($(j));

        u.each(function () {
            var top = $(this)[0];

            var topAlignedCells = cells.filter(function () {
                return $(this).offset().top == top;
            })

            var max = 0;

            topAlignedCells.each(function () {
                max = Math.max(max, $(this).height());
            })

            topAlignedCells.filter(function () {
                return $(this).height() != max;
            }).height(max);
        })

    })
})

Answer 6

Para hacer que el sitio web responda, debe especificar el ancho en% y mostrar 4 divs con la misma altura y especificar la altura.

.col-md-3 {
    width:25%;
    height:250px;
}

.row {
    width:100%;
}

Answer 7

Para que todos los div tengan la misma altura, debes especificar una altura fija para el div interno (div class = "well"),

CSS

.index_div_item{
    display: block;
    height: 400px;
}

.index_div_item a .well{
    height: 400px;
}

Puede seguir este enlace de demo por ejemplo.

Answer 8

Para tener la misma altura de columnas y no interrumpir la capacidad de respuesta, debe intentar esto:

https://github.com/liabru/jquery-match-height

Utiliza "JQuery". Hasta ahora, para mí, es la solución más simple que hay.

Answer 9

Podemos lograr esto por -

1. Mediante el uso de mecanismo de disposición de tabla
2. Uso del complemento js https://github.com/liabru/jquery-match-height js

1. Mediante el uso de mecanismo de disposición de tabla

Demostración - JS Fiddle

El mecanismo es -

1. Ajustar todas las columnas en un div
2. Haz que div sea una tabla con un diseño fijo
3. Haga que cada columna sea una celda de tabla
4. Usar la propiedad de alineación vertical para controlar la posición del contenido

Podemos hacer columnas de la misma altura y alineadas verticalmente usando las siguientes clases y css.

Base css será-

  /* columns of same height styles */

.row-full-height {
  height: 100%;
}

.col-full-height {
  height: 100%;
  vertical-align: middle;
}

.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}

.col-xs-height {
  display: table-cell;
  float: none !important;
}

@media (min-width: 768px) {
  .col-sm-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 992px) {
  .col-md-height {
    display: table-cell;
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}


/* vertical alignment styles */

.col-top {
  vertical-align: top;
}

.col-middle {
  vertical-align: middle;
}

.col-bottom {
  vertical-align: bottom;
}

Base html será-

<div class="container">
  <h2>Demo 1</h2>
  <div class="row">
    <div class="row-same-height">
      <div class="col-xs-3 col-sm-height">1st column</div>
      <div class="col-xs-3 col-sm-height col-top">2st column</div>
      <div class="col-xs-3 col-sm-height col-middle">3st column</div>
      <div class="col-xs-3 col-sm-height col-bottom">4th column</div>
    </div>
  </div>
</div>

2. Match Media Js

MatchHeight hace que la altura de todos los elementos seleccionados sea exactamente igual. Maneja muchos casos extremos que hacen que los complementos similares fallen.

Enlace demo - here

Answer 10

Puede hacer uso de la display:table propiedades de la display:table :

.row {display:table; width:100%; border-spacing:10px; }
.col-md-3 {display:table-cell; width:25%;}

Example

Actualizar

Como la gente parece estar bajando esto a medida que rompe el bootstrap, realmente deberías apuntar a los elementos con diferentes clases para lo que usa el bootstrap, así que aquí está un violín actualizado que no romperá el resto del bootstrap, para el código anterior, si agregue otra clase de table-row de table-row a la fila, luego puede usar los siguientes estilos:

@media (min-width: 992px) {
  .row.table-row {
    display: table;
    width: 100%;
    min-width: 800px;
    border-spacing: 10px;
  }
  .row.table-row > .col-md-3 {
    display: table-cell;
    width: 25%;
  }
  .row.table-row > .col-md-3 {
    float: none;
  }
}

Example

Answer 11

Puedes lograr esto usando javascript. Averigua la altura más grande de los 4 div y hazlos todos a la misma altura que el mayor.

Aquí está el código:

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

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

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

Answer 12

Si alguien está interesado en una solución CSS pura que no rompa la capacidad de respuesta, esto funcionó para mí (tenga en cuenta que agregué la clase "row-eq-height" donde la clase "row" es para aclarar y no interferir con bootstrap css y cambió ''md'' por ''xs'' para verificarlo mejor en la demostración).

<div class="row row-eq-height">
<div class="col-xs-3 index_div_item">
    <a href="#">
    <div class="well" id="item1">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2 class="h2_item_glyphicon"><span class="glyphicon glyphicon-ok-circle"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
    </div>
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item2">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-stats"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>  
    </a>
</div>    
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item3">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-send"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>
        </div>
    </a> 
</div>  
<div class="col-xs-3 index_div_item">
    <a href="#">
        <div class="well" id="item4">
            <h1 class="h1_item"><span class="titre_item">Title</span></h1>
            <h2  class="h2_item_glyphicon"><span class="glyphicon glyphicon-cog"></span></h2>
            <p>sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr</p>                
        </div>  
    </a>  
</div>              

css:

    .row-eq-height{
    overflow: hidden; 
}

.row-eq-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Puede consultar una demostración here.

Answer 13

Tuve el mismo tipo de situación en la que cada columna dentro de una fila debería ser de la misma altura. Al considerar las respuestas anteriores y con un pequeño truco, fue fácil implementar y resolver el problema del cambio de tamaño de la ventana también.

$(document).ready(function() {
    //Initiate equalize on load
    equalize();
});

//Equalize on resizing of window
$(window).resize(function() {
    removeHeights();
    equalize();
});

function equalize(){

    $(".container .row").each(function() {
        var heights = $(this).find("p").map(function() {
          return $(this).height();
        }).get(),

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

      $(this).find("p").height(maxHeight);

    });
}

function removeHeights(){

    $(".container .row").each(function() {

      $(this).find("p").height("auto");

    });
}

Verifique la demostración aquí - https://jsfiddle.net/3Lam7z68/ (Cambie el tamaño del panel de salida para ver el cambio de cada tamaño de la columna div)

Answer 14

paulalexandru tiene una gran respuesta que utilicé para resolver mi problema. Sin embargo, no soluciona el problema que me ocurrió cuando cambié el tamaño de la ventana. En ocasiones, el texto se extendería más allá de la altura especificada y sangraría en el texto de la fila siguiente.

Así que agregué una segunda función que detectaría el tamaño de la ventana, restablecería la altura en automático y luego establecería la altura en el div si es mayor que 967. El número 967 puede cambiarse al número que desee usar cuando responsive lo reduce todo a solo una columna

$(window).resize(function () {

        // reset height to auto.
        $(".div-name1").height("auto");  
        $(".div-name1").height("auto");            

        // check if the width is greater than 967 under 967 responsive switches to only 1 column per row
        if ($(window).width() > 967) {
            // resize the height
            myresize1(".row-name1", ".div-name-row1");
            myresize1(".row-name2", ".div-name-row2");
         }

            function myresize1(name1, name2) {
                $(name1).each(function () {
                    var heights = $(this).find(name2).map(function () {
                        console.log($(this).height() + " - ");
                        return $(this).height();
                    }).get(),

                    maxHeight = Math.max.apply(null, heights);
                    console.log(maxHeight + " - ");
                    $(name2).height(maxHeight);
                });
            };            
    });

Answer 15

El experimento de Bootstrap , mencionado por @cvrebert, funciona para mí en Microsoft Internet Explorer (versión 11) y Mozilla Firefox (versión 37), pero no funciona para mí en Google Chrome (versión 42, 64 bits).

Inspirado por las respuestas de @cvrebert y @Maxime, se me ocurrió esta solución, que funciona para mí en esos tres navegadores. Decidí compartirlo, así que quizás otros también lo puedan usar.

Supongamos que tiene algo como esto en su HTML:

<div class="row row-eq-height">
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
    <div class="col-eq-height col-xs-3">
        Your content
    </div>
</div>

Agregue esto a su JS:

$(document).ready(function() {
    $(".row-eq-height").each(function() {
        var heights = $(this).find(".col-eq-height").map(function() {
            return $(this).outerHeight();
        }).get(), maxHeight = Math.max.apply(null, heights);

        $(this).find(".col-eq-height").outerHeight(maxHeight);
    });
});

Utiliza la función .outerHeight() jQuery para calcular y establecer las alturas del div interno.

Además, agregué esto a mi CSS, no estoy seguro si esto ayuda, pero seguramente no duele:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}