Question

我似乎在尝试使用带有bootstrap 3列的flexbox时遇到问题。我有以下代码可以预览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- *能够持续存在，或者我可以获得等于高度但是它会再次抛出宽度。 / p>

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

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

Answer 1

您可以为display: flex添加widget-header-div，为height: 100%添加.panel - 您的列数也会相同。

如果您想在响应式上下文中考虑宽度，可以使您的flexbox 换行。

见下面的演示：

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

列的Bootstrap 3弹性框问题

1 个答案: