引导网格图像问题

Question

我有这个基本的博客设置，在其中将帖子显示为网格。 问题是，当我有3条帖子时，一切看起来都很不错，但是当我输入另一条帖子并且该行必须折断到另一行时，会出现这种奇怪的塌陷或第一张图片的高度与另一张图片的高度不同的情况。 如果输入另一张图像，则另一张图像会出现尺寸问题。 这是一张照片：

我使用的html（我从db显示帖子时包含php）：

echo '<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 postCol">';
    echo '<li class="list">';
    echo '<h1 class="titles"><a href="viewpost.php?id='.$row['postID'].'">'.$row['postTitle'].'</a></h1>';
    echo '<p>Posted on '.date('jS M Y', strtotime($row['postDate'])).' by '.'<span class="author-name">'.$row1['username'].'</span>'.'</p>';
    echo '<p>'.$row['postDesc'].'</p>';
    echo '<div class="imgT">';
        echo '<img class="img-responsive" src="'.$row2['imgLoc'].'"'.'/>';
    echo '</div>';         
    echo '<div class="read-more"><a href="viewpost.php?id='.$row['postID'].'">Read More >></a></div>'; 
    echo '</li>';
echo '</div>';  

我正在使用此CSS来设置图像的样式：

.imgT {
    margin: 0;
}


.imgT img{
    position: relative;
    width: 100%;
    height: 100%;
}

Answer 1

您可能想要这样的东西：

@media all and (min-width: 768px) and (max-width: 1200px) {
  .postCol:nth-child(2):after {
    content: " ";
    display: table;
    clear: both;
  }
}

@media all and (min-width: 1200px) {
  .postCol:nth-child(3):after {
    content: " ";
    display: table;
    clear: both;
  }
}

（代码是untestet）

这段代码只是在桌面视图中的每个第三个孩子之后添加了bootstrap clearfix。 您的浮点数应重新设置，并以某种方式开始新的一行。 您只需要使它适应所有断点即可。

注意：嵌套在ol ＆ ul以外的其他位置的li是无效的HTML，您应该对此进行修复。