Bootstrap-具有相同高度和宽度的面板

我有一个 div.row 包含3个不同内容的面板:

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

我希望将所有面板设置为具有相同的高度,无论其内容如何,就像在本主题中一样 Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row ,所以我已经设置了 .equal 班

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

问题是,尽管高度设置为等于所有面板,但每个面板的宽度都发生了变化,因此现在我的面板宽度不相同(默认宽度)。

有没有一种方法我也可以固定宽度,或者用另一种方法使所有面板的宽度和高度相同?

JSFiddle