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让所有cols高度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%

        }