Bootstrap列错位问题解决：PHP循环生成文章列排版异常

这个问题其实是Bootstrap网格系统的常见坑——当同一行的列高度不同时，下一行的列会被高的列“挡住”，无法对齐到左侧。不用绝对定位的话，有两种简单可靠的解决方案：

方案一：让所有列高度一致（推荐） #

Bootstrap自带了flex布局工具类，我们可以利用它让列自动填充高度，这样不管内容多少，每一行的列高度都相同，布局就不会错位了。

修改你的PHP代码： #

在生成列的div里添加h-100类，同时给列添加flex垂直布局，让内容自动撑满高度：

while($row=mysqli_fetch_array($run_query)){ 
    echo '<div class="col-md-6 col-xl-4 blogColumn h-100 d-flex flex-column">'; 
    echo '<a class="articleLink flex-grow-1 d-block" href="show.php?blogId=';echo $row['id'].'" target="_blank">'; 
    echo '<article>'; 
    echo '<header>'; 
    if($row['file_id']==null){ 
        echo '<img class="img-fluid rounded focus" src="https://i.ibb.co/ZNDm012/logo.jpg"/>'; 
    } else{ 
        $fileId=$row['file_id']; 
        $q="SELECT * FROM uploads WHERE id='$fileId'"; 
        $run_q=mysqli_query($con,$q) or die(mysqli_error($con)); 
        $res=mysqli_fetch_array($run_q); 
        $path="uploads/" . $res['name']; 
        if($res['type']=='image'){ 
            echo '<img class="img-fluid rounded focus" src="'.$path.'"/>'; 
        } else { 
            echo '<video class="articleVideo" src="'.$path.'" controls="controls">'; 
            echo '</video>'; 
        } 
    } 
    echo '<h2>'.$row['title'].'</h2>'; 
    echo '</header>'; 
    echo '<p>'.substr($row['description'],0,100).'... Read More'.'</p>'; 
    echo '</article>'; 
    echo '</a>'; 
    echo '<hr/>'; 
    echo '</div>';
}

关键改动说明： #

• h-100：让列的高度占满父容器（行）的高度
• d-flex flex-column：把列设置为垂直方向的flex容器
• flex-grow-1 d-block：让链接元素撑满列的剩余空间，这样底部的hr会始终在列的最下方，保持布局整齐

方案二：使用CSS多列布局（瀑布流效果） #

如果你想保留内容的自然高度，同时让第三列自动排在第一列下方，可以用CSS的column布局来实现类似瀑布流的效果，这种方式不需要强制列等高。

步骤1：给列的容器添加类名 #

假设你的列都包裹在一个容器里，比如：

<div class="blog-container">
    <!-- 这里是循环生成的列 -->
</div>

步骤2：添加自定义CSS #

根据不同屏幕尺寸设置列数：

/* 中等屏幕（md）显示2列 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .blog-container {
    column-count: 2;
    column-gap: 1.5rem; /* 对应Bootstrap的 gutter 间距 */
  }
  .blogColumn {
    break-inside: avoid; /* 防止内容被列分割 */
    margin-bottom: 1.5rem;
    display: inline-block;
    width: 100%;
  }
}

/* 超大屏幕（xl）显示3列 */
@media (min-width: 1200px) {
  .blog-container {
    column-count: 3;
    column-gap: 1.5rem;
  }
}

/* 小屏幕显示1列 */
@media (max-width: 767.98px) {
  .blog-container {
    column-count: 1;
  }
}

步骤3：修改PHP代码中的列类名 #

去掉原来的col-md-6 col-xl-4，只保留blogColumn：

echo '<div class="blogColumn">'; 

这样在md屏幕下，内容会自动按列从上到下排列，第三个元素会紧跟在第一个元素的下方，完美解决错位问题。

内容的提问来源于stack exchange，提问作者Shashwat Srivastava