图库列未正确对齐（Twitter-Bootstrap）

Question

我有一个非常简单的任务要做，但我无法弄清楚它为什么不起作用......我的目标是在sm，md和lg上有一系列带有各种网格配置标题的图像。但是，对齐总是搞砸了。这有点难以解释，但很容易证明。所以这是演示：http://www.bootply.com/zrEgRHnaup

正如您在更改窗口大小时所看到的那样，网格非常混乱。在bootply上玩代码，我意识到当所有图像大小相同时，问题不会发生。即使图像尺寸不均匀，如何使这个网格工作？

<section id="detail" class="greenBG">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-lg-offset-3">
                <div class="about-text">
                    <div class="section-title">
                        <h4>Confection</h4>
                        <h2><strong>Vivamus</strong></h2>
                        <hr>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <p>Fusce in pulvinar nisi. Cras tristique sed orci.<br><br></p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Curabitur</h5>
                <img src="https://placehold.it/200x280" class="center-block img-responsive">
                <p>Aenean tempor erat ut consequat rutrum.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Cras</h5>
                <img src="https://placehold.it/200x250" class="center-block img-responsive">
                <p>Point d'amure de voile enrouleur avec renfort radial, oeil ou sangle au besoin.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Génois Drisse</h5>
                <img src="https://placehold.it/200x250" class="center-block img-responsive">
                <p>Nulla auctor vel arcu eu egestas. Vestibulum ut sapien finibus.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Amure</h5>
                <img src="https://placehold.it/250x300" class="center-block img-responsive">
                <p>Aenean tempor erat ut consequat rutrum.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Driss</h5>
                <img src="https://placehold.it/200x250" class="center-block img-responsive">
                <p> Integer at velit nec lectus facilisis varius sed non ipsum.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Curabitur</h5>
                <img src="https://placehold.it/200x250" class="center-block img-responsive">
                <p>Fusce nec pretium dolor. Sed commodo ipsum.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Latte</h5>
                <img src="https://placehold.it/200x270" class="center-block img-responsive">
                <p>Nulla auctor vel arcu eu egestas. Vestibulum ut sapien finibus.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Risonite</h5>
                <img src="https://placehold.it/200x220" class="center-block img-responsive">
                <p>Vivamus sed orci tristique, pulvinar odio at, congue urna.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Voyilur</h5>
                <img src="https://placehold.it/200x250" class="center-block img-responsive">
                <p>Class aptent taciti sociosqu ad litora torquents.</p>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <h5 class="text-center">Tristique</h5>
                <img src="https://placehold.it/200x250" class="center-block img-responsive">
                <p>Suspendisse diam diam, finibus ac urna id, hendrerit tempus nibh. Nulla eget consequat nibh.</p>
            </div>
        </div>
    </div>
</section>

感谢您的帮助！