html - Bootstrap 3 flex box 问题与列

Question

我似乎在尝试将 flexbox 与 bootstrap 3 列一起使用时遇到问题。我有以下代码可以预览 on 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

您可以为 widget-header-div 添加 display: flex ，为 .panel 添加 height: 100% code> - 列的高度相同。

如果你想在响应上下文中考虑宽度，你可以让你的 flexbox wrap。

请看下面的演示:

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