bootstrap列高度_html – 不同高度的Bootstrap流体列列

问题

问题是所有引导列试图向左浮动.

when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

所以当你有不均匀的高度元素,正确的行为是将它们堆叠在一边.

幸运的是,有很多方法来纠正这个预期的行为：

使用CSS清除属性

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them

对于这个确切的结构,您可以使用nth-child selector对每个其他行应用清楚：

.col-xs-6:nth-child(odd) {

clear: both;

}

Note: The 07003

演示jsFiddle /堆栈片段：

.col-xs-6:nth-child(odd) {

clear: left;

}

.col-xs-6 {

border: 1px solid grey;

}

Two

Lines

Tw