Html 引导程序3：如何保持缩略图或图像在一行内对齐？

我试图让这个网格工作，但我不确定什么是最好的方法在这里。我有几个缩略图和每个缩略图有一个标题这一页。问题是，当标题长度很长时，它会推动缩略图，而所有内容都会像这样变得混乱：

我想找到一种保持缩略图对齐的方法，因此如果有一个很长的标题，而不是向下推缩略图，它会推整行

这是我到目前为止为这组缩略图所做的标记：

<div class="container">
   <div class="content row">
          <div class="col-lg-12">
                <h1>Fresh Goals and More</h1>
                <hr>
          </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                      </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title That is Very Long So I Can Test How does Long Titles Behave in My web site display<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                  <h2>Test Title<h2>
                    <a class="thumbnail" href="#">
                      <div class="vignette">
                        <img class="img-responsive" src="img/placeholder.jpg">
                        </div>
                    </a>
                </div>
  </div><!-- content row close -->
 </div><!-- container close -->

新的目标和更多

考试题目
测试非常长的标题，以便我可以测试长标题在我的网站显示中的表现
考试题目
考试题目
考试题目
考试题目
考试题目
考试题目

---

有没有关于如何修复此问题的提示？提前谢谢。

这很简单，你必须用四个大拇指排成一行

<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>
<div class="row">
<div class="col-md-3">thumb</div><div class="col-md-3">thumb</div><div class="col-md-3">thumb</div>
</div>

拇指
拇指

行将保留具有子元素的最长列的高度