html - Bootstrap 3 : How to keep thumbnails or images aligned within a row?

Question

我正在尝试让这个网格正常工作，但我不确定这里最好的方法是什么。我有这个页面有几个缩略图，每个缩略图都有一个标题。问题是，当标题长度很长时，它会推送缩略图，一切都会变得像这样乱七八糟:

我想找到一种方法来保持缩略图对齐，所以如果有一个很长的标题而不是向下插入缩略图，它会插入整行。

这是我目前为这 block 缩略图所做的标记:

<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 -->

关于如何解决这个问题的任何提示？提前致谢。

Answer 1

这很简单，你必须有四个拇指排成一排

<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>

该行将保持最长列的高度与 child 的拇指 http://www.bootply.com/6C7i5iRZhz