Question

我有一个博客网站，它使用bootstrap来编写和提交帖子也是一个索引页。

显然，不同的缩略图尺寸，除非使用标准图像尺寸，否则它们的长度会有所不同。

这就是标准的样子：

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

我想这样做，以便左下方帖子中的博客帖子向上移动到左上角。

这是我使用的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>

我知道行通常在引导程序中使用，但我把它们拿出来，一切都是一样的。如何实现博客文章紧密结合的效果？

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

使不同尺寸的容器在引导程序中正确对齐

1 个答案: