Bootstrap 3 flex box 列问题

Question

我似乎在尝试将 flexbox 与 bootstrap 3 列一起使用时遇到问题。我有以下代码，可以在 jsfiddle here上预览

<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
        <div class="panel-heading">Box 1</div>

        <div class="panel-body">
            <table class="col-md-12 text-left">
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                </tr>
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                        <td>Value</td>
                </tr>
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
        <div class="panel-heading">Box 2</div>
        <div class="panel-body">
           <table class="col-md-12 text-left">
                <tr>
                    <td>Key</td>
                    <td>Value</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="col-xs-12 col-lg-6 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
        <div class="panel-heading">Box 3</div>
        <div class="panel-body">
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        </div>
    </div>
</div>

使用 CSS：

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

我尝试了一些不同的 css 片段，但我要么最终得到等宽的列，我不想要它，因为我希望 col-xs-* 保持不变，或者我可以获得相等的高度，但它再次抛出了宽度。

我想要实现的是所有 3 个面板的高度相等，但要考虑类的列宽。

对我所缺少的任何指导将不胜感激。

Answer 1

You can add display: flex for the widget-header-div and height: 100% for .panel - and you will have same heights for the columns.

If you want to take the widths into consideration in the responsive context, you can make your flexbox wrap.

See demo below:

.widget-header-div {
  display: flex;
  flex-wrap: wrap;
}

.widget-header-item .panel {
  height: 100%;
}
.widget-header-item {
  margin-bottom: 20px;
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="col-xs-12 widget-header-div">

  <div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
      <div class="panel-heading">Box 1</div>

      <div class="panel-body">
        <table class="col-md-12 text-left">
          <tr>
            <td>Key</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Key</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Key</td>
            <td>Value</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
      <div class="panel-heading">Box 2</div>
      <div class="panel-body">
        <table class="col-md-12 text-left">
          <tr>
            <td>Key</td>
            <td>Value</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-lg-6 widget-header-item">
    <div class="panel panel-primary pmd-z-depth">
      <div class="panel-heading">Box 3</div>
      <div class="panel-body">
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
        <p>Larger body of text here</p>
      </div>
    </div>
  </div>

</div>