使不同大小的容器在引导程序中正确对齐答案

【问题标题】：Make containers of different sizes align correctly in bootstrap使不同大小的容器在引导程序中正确对齐
【发布时间】：2015-10-23 11:43:27
【问题描述】：

我有一个博客站点，它使用引导程序编写和提交帖子以及一个索引页面。

显然，缩略图大小不同，除非使用标准图像大小，否则它们的长度将不同。

这就是它看起来像标准的样子：

这是一个比另一个长时的样子：

我想让它使左下角的博客帖子向上移动到左上角的帖子。

这是我使用的 html：

<section>
    <div class="container">
        <div class="col-md-8">
        <div class="col-md-6">
            <div class="thumbnail">
            <img src="img/thumbnailbig.png" alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <h4>Written by LCBradley3k</h4>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p>Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p>Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p>Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-4">
    <div class="list-group">
      <a href="#" class="list-group-item active"><span class="badge">14</span>
        Map Building
      </a>
      <a href="#" class="list-group-item"><span class="badge">14</span>Crafting</a>
      <a href="#" class="list-group-item"><span class="badge">28</span>Servers</a>
      <a href="#" class="list-group-item"><span class="badge">10</span>3d Modeling</a>
      <a href="#" class="list-group-item"><span class="badge">2</span>Clothing</a>
    </div>
  </div>

我知道行在引导程序中很常用，但我把它们拿出来了，一切都还是一样。怎样才能达到让博文紧贴在一起的效果？

【问题讨论】：

您需要什么样的浏览器兼容性？
不支持IE8等旧版IE。
你可以看看masonry
你把“他们”拿出来了？对于这样的布局，您只需添加 1 行和 4 列。

标签： html css twitter-bootstrap

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
.pc{


height: auto; 
  max-height: 20px;
  overflow: hidden; 


}
</style>





<section>
    <div class="container">
        <div class="col-md-8">
        <div class="col-md-6">
            <div class="thumbnail">
            <img src="img/thumbnailbig.png" alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <h4>Written by LCBradley3k</h4>
                <p class="pc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p class="pc">Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p class="pc">Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="thumbnail">
        <img src="img/thumbnailbig.png" alt="...">
        <div class="caption">
          <h3>Thumbnail label</h3>
          <h4>Written by LCBradley3k</h4>
          <p class="pc">Lorem Ipsum is simply dummy text o</p>
          <p><a href="show.html" class="btn btn-primary btn-block" role="button">Read More</a></p>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-4">
    <div class="list-group">
      <a href="#" class="list-group-item active"><span class="badge">14</span>
        Map Building
      </a>
      <a href="#" class="list-group-item"><span class="badge">14</span>Crafting</a>
      <a href="#" class="list-group-item"><span class="badge">28</span>Servers</a>
      <a href="#" class="list-group-item"><span class="badge">10</span>3d Modeling</a>
      <a href="#" class="list-group-item"><span class="badge">2</span>Clothing</a>
    </div>
  </div>
</body>
</html>

【讨论】：