Question

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

enter image description here

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

这是我到目前为止这个缩略图块的标记：

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

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

Bootstrap 3：如何在一行内保持缩略图或图像对齐？

1 个答案: