PHP代码中col-md-4区块无法横向并排问题求助

嘿，我帮你找到了问题的核心！看你提供的前端输出就能发现：每个新分类（GENUS）的第一个col-md-4刚输出，对应的row就被闭合了，导致这个列单独占了一行，后续的列甚至没被包裹在row容器里，自然只能纵向堆叠。

问题根源：PHP逻辑的时序错误 #

你的代码里，当检测到GENUS变化时，做了这几件事：

1. 输出分类标题的row
2. 打开一个新的row用来放品种列
3. 输出当前的col-md-4
4. 立刻闭合这个刚打开的row

这就意味着，每个分类的第一个品种列会被单独放在一个row里，而后续的品种列直接脱离了row容器——Bootstrap的栅格系统要求同属一行的列必须放在同一个row里，否则必然布局错乱。

修复后的PHP代码 #

我们需要调整逻辑：

• 当GENUS变化时，先关闭上一个分类的row（如果存在），再输出新分类的标题并打开新row
• 循环结束后，手动关闭最后一个打开的row，避免标签不闭合

<?php 
$previousCat = null; 
$rowOpened = false; // 新增变量跟踪row是否已打开

while(!$DETAILS->atEnd()) { 
    // 检测到GENUS变化时的处理
    if($DETAILS->getColumnVal("GENUS") != $previousCat) { 
        // 如果之前有打开的row，先关闭它
        if ($rowOpened) {
            echo '</div>';
            $rowOpened = false;
        }
        // 输出分类标题行
        echo '<div class="row"> <div class="col-md-6 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div> </div>';
        // 打开新的品种row
        echo '<div class="row">';
        $rowOpened = true;
    } 

    // 输出品种列
    echo ' <div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px"> 
            <p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid" /></p> 
            <p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong> <br />'.$DETAILS->getColumnVal("DESCRIPTION").' <br />'.$DETAILS->getColumnVal("TYPE").'</p> 
          </div> '; 

    // 更新上一个分类的值
    $previousCat = $DETAILS->getColumnVal("GENUS"); 
    $DETAILS->moveNext(); 
} 

// 循环结束后，关闭最后一个打开的row
if ($rowOpened) {
    echo '</div>';
}

$DETAILS->moveFirst(); //return RS to first record 
?>

修复后效果 #

每个分类下的所有col-md-4都会被包裹在同一个row里，Bootstrap会自动按每行3列的规则排列，不会再出现纵向堆叠的问题。

内容的提问来源于stack exchange，提问作者Bill Teale