引导 3 - 使列内的 div 与同一行上的其他列高度相同

Question

根据标题，我已经尝试制作height:100% min-height:100%等，但没有帮助。

以下来自类似问题的内容使所有列的高度相等，但我需要内部div 拉伸 100% 以匹配同一行上其他列的高度。

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

其他列包含具有img-responsive类的图像，因此它们会根据视口大小自动调整大小，并且有问题的div 将混合文本和图像。

这是JS小提琴

Answer 1

Yo 可以使用 table-row 和 table-cell 进行显示，但您必须禁用每个col元素的浮动样式，

.row {
    display: table-row;
}
[class*="col-"]{
    background-color: red;
    float: none;
    display: table-cell;
}

杰斯菲德尔演示

Answer 2

您可以将

@kariem的 CSS 包装在 @media 指令中，以允许动态堆叠列：

@media (min-width: 768px) {
    .row {
        display: table-row;
    }
    [class*="col-"]{
        float: none;
        display: table-cell;
    }
}

只要确保使用适当的min-width和列大小（col-lg-、col-md-等）。http://jsfiddle.net/davc6/23/