Question

我正在尝试使用Bootstrap 3执行具有相同高度的响应列布局。我可以在所有列位于同一行时执行此操作，例如：http://jsfiddle.net/aitorrodriguez/6sdbnwg6/

另一个例子是：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

但是当我尝试使用多行时遇到问题，因为我不知道我将拥有多少列，并且列的行将根据分辨率而变化：

<div class="row">
    <div class="col-lg-4 col-md-6 col-xs-12">
        <p>Test</p>
    </div>
    <div class="col-lg-4 col-md-6 col-xs-12">
        <p>Test</p>
    </div>
    <div class="col-lg-4 col-md-6 col-xs-12">
    <p>Test</p>
    </div>
    <div class="col-lg-4 col-md-6 col-xs-12">
        <p>Test</p>     
    </div>
    <div class="col-lg-4 col-md-6 col-xs-12">
        <p>Test</p>     
    </div>
</div>

我该怎么办？任何人都知道一些解决方案或者不可能做到这一点？

Answer 1

不是一个优雅的解决方案，但有时会做到这一点

.row { /*or the name of the wrapper*/
   overflow: hidden; 
}

.col-lg-4 { /*the column*/
    margin-bottom: -999px;
    padding-bottom: 999px;
}

看一下这个更详细的jsfiddle

在Bootstrap 3上具有多个行的相同高度列

1 个答案: