css - ブートストラップ列が垂直方向に正しく整列しない

Question

隣り合って浮かんでいる要素がたくさんあります。それらは別々の行にないため、必要に応じて次の行にドロップされます。したがって、要素の 1 つが下の要素よりも短い場合は、その下の要素よりも高くなるはずです。兄弟ではありませんが、そうではないようです。すべての要素は、ラッパー行にあるかのように機能し、すべて同じ高さです。

コードペン: 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ますか?