Question

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

以下类似的问题使得所有列都达到相同的高度，但我需要100％的内部div拉伸以匹配同一行中其他列的高度。

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

其他列包含img-responsive类的图像，因此它们会根据视口大小自动调整大小，这个div将混合使用文本和图像。

这是JS Fiddle

Answer 1

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

.row {
    display: table-row;
}

[class*="col-"]{
    background-color: red;

    float: none;
    display: table-cell;
}

Jsfiddle demo

Answer 2

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

@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/

Bootstrap 3 - 使div在列内的高度与同一行上的其他列相同。

2 个答案: