Question

我正在使用bootstrap 3，我有一行有3列，每行都有一个面板

    <div class="row clearfix dashboard">
  <div class="col-md-4">
      <div class="panel panel-opaque">
        <div class="panel-heading"><h3 class="panel-title">Schneehöhen</h3>
        </div>
        <div class="panel-body"></div>
      </div>
   </div>
   <div class="col-md-4"></div>
   <div class="col-md-4"></div>
</div>

面板有不同的高度，但我希望它们都具有相同的高度。我尝试使用display：flex on row但这只影响了列的高度相等，面板保持不变。那我怎么能实现呢？

Answer 1

这是最简单的解决方案

<div class="row">
<div class="col-md-4" style="background-color: red">
    <div class="panel-heading">
        <h3 class="panel-title">Schneehöhen</h3>

    </div>
    <div class="panel-body"></div>
  </div>
  <div class="col-md-4" style="background-color: white">content</div>
  <div class="col-md-4" style="background-color: blue "></div>
</div>

并将此css与

一起使用

.row[class*="col-"] {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}

或者这是使用此css

执行相同操作的另一种方法

.row {
display: table;
}

.row [class*="col-"] {
float: none;
vertical-align: top;
}

Flexbox接近flexbox demo

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

Answer 2

我现在想出了如何解决它：

.row{
display:flex;
}

降序col也需要弯曲

.row [class*='col-']{
display:flex;
}

.panel{
flex:1
}

如何在面板内部垂直拉伸柱子

2 个答案: