Bootstrap - panneaux de même hauteur et de la largeur

Je vais avoir un div.row qui contient 3 panneaux avec des contenus différents:

<div class="row equal">

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 1</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 2</h3>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h3>Title 3</h3>
          <p>This is a paragraph</p>
        </div>
      </div>
    </div>

</div>

J'aimerais régler tous les panneaux pour avoir la même hauteur, quel que soit leur contenu, comme sur ce sujet Twitter Bootstrap 3 - Panneaux d'Égale Hauteur dans un Fluide Ligne, j'ai donc mis mon .equal classe.

.equal, .equal > div[class*='col-'] {  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
}

Le problème est que, bien que la hauteur est égale à tous les panneaux de la largeur de chaque panneau a changé, alors maintenant, mes panneaux n'ont pas la même largeur (celui par défaut).

Est-il un moyen que je puisse corriger la largeur de trop, ou peut-être utiliser un autre moyen d'avoir dans tous mes panneaux de même largeur et de la hauteur?

JSFiddle

Par (par défaut) vous voulez dire à .panel doit couvrir la totalité du width de col-md-4 ?

OriginalL'auteur Lykos | 2015-09-02

  1. 4

    Je pense que vous voulez quelque chose comme ceci:

    Réglage séparé pour faciliter la référence.

    .equal {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

div[class*='col-'] {
  flex:1 1 auto;
  background: lightblue;
  display: flex;
}
.panel {
  flex:1 0 100%;
}

    Codepen Démo

    Ce n'est pas réactif
    Oui...c'est...vérifier la Codepen démo.
    Je veux dire, panneaux de ne pas les empiler. Essayez d'ajouter plus de panneaux (e.g 4 X col-md-3) - vous obtiendrez de barre de défilement horizontale.
    Merci! Il a travaillé comme un charme!

    OriginalL'auteur Paulie_D

  2. 1

    que si vous réglez la hauteur de la mère et tous les enfants à hauteur de 100%?

    .equal{
    height:200px;
}
.col-md-4, .panel{
    height:100%;
}

    https://jsfiddle.net/aroxv143/1/

    OriginalL'auteur stackoverfloweth