html - 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;
  }
}

(代码未测试)

这段代码只是在桌面 View 中每三个 child 之后添加 Bootstrap clearfix。您的 float 应该重置并开始新的一行。您只需要使它适应您所有的断点。

注意 li 嵌套在 ol 和 ul 之外的其他内容中是​​无效的 HTML，您应该修复它.