複数の要素を同じ高さと垂直方向に維持する

Question

私が取り組んでいるプロジェクトでは苦労しています。

JSFiddle example

私はすべてのボタンを同じ高さを持っていると思います。 大画面ではすべてが良いです。 しかし、私がスケールダウンを開始するとき、彼らは異なる高さを得るのを開始します。 これは予期した結果です。

しかし、このページで文字列を引っ張っている人は、すべてのボタンが同じ高さになるようにします。 1つのテキストが次の行に移動し、ボタンを大きくするとほとんどのボタンが同じ高さになります。

これはビューポートのすべての幅に適用されます。

私はこの挑戦で私を助けてくれることを願っています。 詳細については、できるだけ早く質問を更新します。

PS。下位互換性を可能な限り高くしたいので、私はCSS3を使いたくありません。

ここにコードを追加する必要があるので、これは自分のhtmlの状況です。

 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3"> 
      <a href="#" class="button button-primary bpanelbutton">This is a short text</a> 
     </div> 

     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3"> 
      <a href="#" class="button button-primary bpanelbutton">This is a long text like this</a> 
     </div> 

     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3"> 
      <a href="#" class="button button-primary bpanelbutton">This is a long text that is even longer tha the previous button</a> 
     </div> 

     <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3"> 
      <a href="#" class="button button-primary bpanelbutton">This is a short text</a> 
     </div> 
    </div> 

</div> 

Answer 1

これは私が同様のプロジェクトのために書いた基本的なjQueryのコードです。

P.S特定の解像度でのみ作業したい場合は、ビューポート幅チェッカーで囲むことを推奨します。また、ビューポートが変更されるたびに更新する場合は、ウィンドウのサイズ変更リスナーを追加します。

Answer 2

フレキシボックスはあなたのより容易な解決策は、私はあなたが持っている問題を解決しようとする記事を見つけたことがあります。

チェックこの記事：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

---

コード：

.row { 
    display: flex; 
    flex-wrap: wrap; 
    overflow: hidden; 
} 

.button-primary { 
    background-color: #005f96; 
    color: white; 
    font-size: 20px; 
    margin: 2%; 
    display:flex-item; 
    width: 21%; 
} 

---

デモ：

https://jsfiddle.net/x2cqqcz7/

---

エクストラ：

私は、ボタンの周りにラッピングdivを削除したともあなたはおそらくメディアクエリを使用します。それは、それぞれの子をループし、それに応じて高さを更新し

var eqheight = 0; 
$('.col-eqheight-sm').each(function() { 
    if($(this).outerHeight() > eqheight) { 
     eqheight = $(this).height(); 
    } 
    }); 
    $('.col-eqheight-sm').height(eqheight); 

：