Bootstrap网格图像问题

Question

我有这个基本的博客设置，我将帖子显示为网格。问题是，当我有3个帖子时，一切都看起来不错但是当我进入另一个并且线必须打破到另一行时会出现这种奇怪的崩溃或者第一个图像的高度与其他图像不同的东西。如果我输入另一个图像，则尺寸问题会发生在另一个图像上。这是一张照片：

我使用的html（它包含php，因为我正在显示来自db的帖子）：

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）

这段代码只是在桌面视图中的每三个子项后添加bootstraps clearfix。你的浮动应该重置，并开始一个新的行。您只需要将其调整到所有断点即可。

注意： li嵌套在ol以外的其他内容中ul是无效的HTML，您应该修复它。