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

【问题标题】：How to match all col height to row height in Bootstrap 3?如何在 Bootstrap 3 中将所有列高与行高匹配？
【发布时间】：2014-09-07 20:23:52
【问题描述】：

在这种情况下， 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>

如果我为行设置高度，则所有列都可以匹配行高。但我不想设置行的高度，因为我希望行高可以匹配最大的 col 高度。如何使用 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>

【问题讨论】：

stackoverflow.com/questions/19819816/…对你有帮助。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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%

        }

【讨论】：

【解决方案2】：

如果没有一些固定的参考高度，您所要求的解决方案是不可能的。

您可以在此处应用两种替代方案：

创建具有固定高度的 .col div 并将溢出属性设置为 auto，因此如果内容超出您的固定高度，滚动条将在此处可见 jfiddle:http://jsfiddle.net/9FFgN/1/
使用jquery解决这个问题

【讨论】：