Блог

Я пытаюсь заставить эту сетку работать, но я не уверен, какой подход здесь лучший. У меня есть эта страница с несколькими миниатюрами, и у каждой миниатюры есть заголовок. Проблема в том, что когда длина заголовка очень длинная, она выталкивает миниатюру, и все становится таким беспорядочным:

Я хотел бы найти способ выровнять миниатюры, поэтому, если есть очень длинный заголовок, вместо того, чтобы нажимать на эту миниатюру, она выталкивает всю строку.

Это разметка, которую я до сих пор использовал для этого блока миниатюр:

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

строка сохранит высоту самого длинного столбца с дочерним пальцем
http://www.bootply.com/6C7i5iRZhz