Bootstrap列未垂直对齐

Question

我有一堆我彼此相邻的元素，它们不在单独的行中，因此它们在必要时会下降到下一行，因此如果其中一个元素比另一个元素短，则它应该低于它比它的兄弟姐妹更高，但看起来并非如此，所有的元素都表现得好像它们在一个包装行中并且都具有相同的高度。

CodePen：http://codepen.io/anon/pen/oXLQWg

您可以看到顶部中间元素的高度较小，但它下面的元素不会靠近它，并且与其他元素一起定位。

示例代码：

HTML：

<div class="container">
<div class="list row">
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed.
            </p>
        </div>
    </div>
    <!-- Holder Ends -->
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->                
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->            
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->            
    <div class="holder col-xs-12 col-md-4">
        <div class="review">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan et sem ut pretium. Sed nisl mauris, scelerisque eget nulla in,
                varius semper risus. Cras mollis lacus lacus, ut iaculis leo dictum sed. Quisque porttitor metus et faucibus mollis. Etiam eget velit
                aliquam nisl mattis gravida vitae ac purus. Suspendisse vel magna et leo rutrum varius ut sit amet metus. Vestibulum ante ipsum primis
                in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio nisi, convallis nec lacinia condimentum, rhoncus nec mi. 
            </p>
        </div>
    </div>
    <!-- Holder Ends -->            
</div>
<!-- List Ends -->
</div>
<!-- Container Ends -->

CSS：

.list {
    margin-top: 43px;
}

.list .holder {
    margin-bottom: 15px;
}

.list .review {
    position: relative;
    padding: 14px 20px 20px 20px;
    color: #fff;
    background-color: #e67e22;
}

.list .review p {
    margin: 0;
}

根据我的测试，它似乎与设置box-sizing: border-box;。

有关

是否有任何方法可以解决这个问题，以便较小的元素在能够或者我必须将box-sizing设置为content-box时直接在其上方的元素下方对齐？