html - 如何在 Bootstrap 3 中将所有列高与行高匹配？

Question

在这种情况下，col 中的 height:100% 不起作用，因为 .row 没有高度

div[class*='col']
{
    border:solid 1px #000;
    height:100%;
}
.row
{
    border:solid 1px #000;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

如果我设置行高，则所有列都可以匹配行高。但我不想设置行的高度，因为我希望行高能够匹配最大的列高度。如何使用css使所有列高度为100%？

div[class*='col']
{
    border:solid 1px #000;
    height:100%;
}
.row
{
    border:solid 1px #000;
    height:500px;
}


<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

Answer 1

您可以尝试display: table-cell;。

这是更新后的code

 div[class*='col']
        {
            border:solid 1px #000;
            height:100%;
          display: table-cell;
          float: none
        }
        .row
        {
            border:solid 1px #000;
            /* height:500px; */
          display: table;
          width: 100%

        }