web-dev-qa-db-fra.com

Colonne de même hauteur bootstrap 3 lignes réactives

Salut, j'ai quatre divs dans une rangée de bootstrap. Je veux que tous les divs dans cette rangée aient la même hauteur et ne rompent pas la responsabilité. Je ne sais pas comment faire cela sans rompre avec la responsabilité. 

J'ai essayé de résoudre ce problème avec des hauteurs fixes, mais en termes de réactivité, c'est une mauvaise solution.

Merci :-)

<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>
htmlcsstwitter-bootstraptwitter-bootstrap-3
35
user3279494

Vous pouvez y parvenir en utilisant javascript. Découvrez la plus grande hauteur des 4 divs et placez-les à la même hauteur que le plus grand.

Voici le code:

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

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

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

Il y avait à un moment un exemple expérimental officiel de colonnes de même hauteur utilisant CSS flexbox with Bootstrap. En voici l'essentiel:

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

Et utilisez ensuite <div class="row row-eq-height"> au lieu de <div class="row">.

Notez que flexbox n'est pas pris en charge dans IE <10.

22
cvrebert

FYI - J'ai fait ceci pour résoudre mon problème pour inclure des points d'arrêt réactifs qui correspondent aux points d'arrêt dans le bootstrap. (J'utilise des variables LESS de bootstrap pour synchroniser les points d'arrêt mais la version css compilée est ci-dessous)

@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;
  }
}

puis ajouté les classes au parent qui étaient nécessaires.

<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>
8
FourLeafCleaver

EDIT 1: Je devais aider quelqu'un avec ça alors j'ai fait un plunkr . Allez à "script.js" et commentez "bootstrap_equalizer ();" fonction pour voir le bootstrap original, sans colonnes de même hauteur.

Je sais que c'est un peu tard mais je suis sûr que cela pourrait améliorer votre code et en aider d'autres! :)

Comme je suis habitué à travailler avec Foundation 5, lorsque je dois travailler avec bootstrap, je manque l’équilibreur.

Je fais une petite fonction pour appeler sur les pages où vous devez "égaliser" certaines colonnes . Mon code est basé sur la réponse @paulalexandru!

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);
  });
}

Du côté html, il vous suffit de faire ceci: 

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

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

la colonne 1 et la colonne 2 auront la même hauteur! Vous pouvez bien sûr avoir plus de 2 colonnes!

J'espère que cela peut aider! =)

5
maxime1992

Vous pouvez utiliser les propriétés display:table:

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

Exemple

Mettre à jour

Tandis que les gens semblent avoir un faible vote pour cela, vous devriez vraiment cibler les éléments avec des classes différentes à celles utilisées par bootstrap. ajoutez une autre classe de table-row à la ligne, vous pouvez utiliser les styles suivants:

@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;
  }
}

Exemple

2
Pete

J'ai eu le même genre de situation dans laquelle chaque colonne dans une rangée devrait être de la même hauteur. En examinant les réponses ci-dessus et avec peu d’astuce, il était également facile de mettre en œuvre et de résoudre le problème du redimensionnement de la fenêtre.

$(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");

    });
}

Vérifiez la démo ici - https://jsfiddle.net/3Lam7z68/ (Redimensionnez le volet de sortie pour voir la taille de chaque colonne div changée)

2
Nirav Varma

Pour avoir la même hauteur de colonnes et ne pas briser la réactivité, essayez ceci:

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

Il utilise "JQuery". Jusqu'à présent, pour moi, c'est la solution la plus simple.

1
Omar Gonzales

L'expérience de Bootstrap , comme mentionné par @cvrebert, fonctionne pour moi sur Microsoft Internet Explorer (version 11) et Mozilla Firefox (version 37), mais ne fonctionne pas pour moi sur Google Chrome (version 42, 64 bits).

Inspiré par les réponses de @ cvrebert et de Maxime, j'ai proposé cette solution qui fonctionne pour moi sur ces trois navigateurs. J'ai décidé de le partager, alors peut-être que d'autres pourront l'utiliser aussi.

Supposons que vous avez quelque chose comme ceci dans votre code 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>

Ajoutez ceci à votre 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);
    });
});

Il utilise jQuery 's .outerHeight () function pour calculer et définir les hauteurs de la div intérieure.

De plus, j'ai ajouté ceci à mon CSS, je ne suis pas sûr que cela aide, mais ça ne fait pas de mal:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
1
Antonio Vinicius Menezes Medei

Pour les personnes qui viennent ici pour cette solution dans React, la voici:

  constructor(props) {
    super(props);
    this.state = {
      maxHeight: undefined,
    };

    this.putBootstrapColumnSameHeight = this.putBootstrapColumnSameHeight.bind(this);
  }

  componentDidMount() {
    this.putBootstrapColumnSameHeight();
  }

  putBootstrapColumnSameHeight() {
    const heights = [];
    document.querySelectorAll('.col').forEach(el => heights.Push(el.clientHeight));
    this.setState(
      {
        maxHeight: Math.max.apply(null, heights),
      },
    );
  }

Puis à vos colonnes: 

<Col xs={12} md={7} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

<Col xs={12} md={5} className="col" style={{ height: this.state.maxHeight }}>
 // etc..
</Col>

Prendre plaisir ;)

0
Emidomh

Je suis un peu en retard au jeu, mais ...

Cela alignera les hauteurs d'éléments dans une rangée avec une classe de "rangée-hauteur-assortie". Il fait correspondre les cellules en fonction de leur valeur supérieure. Par conséquent, si elles se superposent lorsque la page devient plus petite, je ne règle pas la hauteur.

Je sais qu'il existe un certain nombre de versions CSS, mais elles altèrent toutes ma mise en page.

$(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);
        })

    })
})
0
Beakie

Pour que tous les divs aient la même hauteur, vous devez spécifier une hauteur fixe pour le div interne (div class = "well"),

CSS

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

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

Vous pouvez suivre ce lien demo par exemple.

0
shan

Si quelqu'un est intéressé par une solution CSS pure qui ne casse pas la réactivité, cela a fonctionné pour moi (notez que j'ai ajouté la classe "row-eq-height" où la classe "row" doit être clarifiée et ne pas interférer avec bootstrap css et changé 'md' pour 'xs' pour mieux le vérifier dans la démo).

<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;
}

Vous pouvez vérifier une démo ici.

0
gugol

Je pense que la réponse de paulalexandru est très bonne. Je voudrais seulement ajouter du code pour éviter les problèmes lorsque la fenêtre est redimensionnée. Si le div avec la plus grande hauteur contient une photo, vous pourriez avoir des problèmes lorsque la largeur de l’image change, car elle changera également sa hauteur. Dans ce cas, vous devriez donc traiter avec resizeevent.

$( 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);
}
0
Luis González