在 PHP 代码中，col-md-4 div 出现在彼此下方，而不是并排显示

Question

下面的php代码正如我预期的那样执行，但是"col-md-4"div出现在彼此下方，而不是连续显示三个。

谁能帮助我做错什么？

<?php
$previousCat = null; // starts the category at NULL
while(!$DETAILS->atEnd()) {
// Check if GENUS if different. If yes then display GENUS and start row to contain all varieties
if($DETAILS->getColumnVal("GENUS") != $previousCat) {
    echo '<div class="row">
    <div class="col-md-6 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div>  
    </div>
    <div class="row">';
 }
// now we output whatever is needed at the start of a new group - in this case,
// user name and date, since we want those only once
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>
';
// if GENUS is different end the row that contains the varieties
if($DETAILS->getColumnVal("GENUS") != $previousCat) {
    echo '</div>';
} 

// save the GENUS for comparison with next GENUS
$previousCat = $DETAILS->getColumnVal("GENUS"); 
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record

?>

输出代码如下 - 看起来在第一个 col-md-4 之后放置了一个额外的div

<div class="row">
    <div class="col-md-6 g-my-10 g-bg-pale"><h2>Asian Greens</h2></div>  
    </div>
    <div class="row">
 <div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
 <p><img src="17_photos/02897.07.Tatsoi.cat.jpg" title="Tatsoi" class="img-fluid" /></p>
 <p><strong>Tatsoi</strong>
 <br />dark spicy asian green
 <br /></p>
 </div>
 </div><div class="row">
    <div class="col-md-6 g-my-10 g-bg-pale"><h2>Beets</h2></div>  
    </div>
    <div class="row">
 <div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
 <p><img src="17_photos/nopic.jpg" title="Baby Beats" class="img-fluid" />
 </p>
 <p><strong>Baby Beats</strong>
 <br />
 <br /></p>
 </div>
</div>
 <div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
 <p><img src="17_photos/nopic.jpg" title="Blankoma" class="img-fluid" /></p>
 <p><strong>Blankoma</strong>
 <br />white, round
 <br /></p>
 </div>

Answer 1

我想出的解决方案是从 php 中取出类"row"，并在 php 编码中使用 col-md-12 和 col-md-4，使用 if else 语句如下所示...

<section class="container-fluid no-gutters">
<div class="row" id="list">
<?php
$previousCat = null; // starts the category at NULL
while(!$DETAILS->atEnd()) {
  // Check if GENUS if different. If yes then display GENUS and start row to contain all varieties
  if($DETAILS->getColumnVal("GENUS") != $previousCat) {
    echo '<div class="col-md-12" style="clear:both">
    <div class="w-50 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div>  
    </div>
  <div class="col-md-4" 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 " style="max-width:80%" /></p>
 <p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong>
 <br />'.$DETAILS->getColumnVal("DESCRIPTION").'
 <br />'.$DETAILS->getColumnVal("TYPE").'</p>
 </div>
';
}
// if GENUS is not different
else {

echo '
 <div class="col-md-4" 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 " style="max-width:80%" /></p>
 <p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong>
 <br />'.$DETAILS->getColumnVal("DESCRIPTION").'
 <br />'.$DETAILS->getColumnVal("TYPE").'</p>
 </div>
';
    }

  // save the GENUS for comparison with next GENUS
  $previousCat = $DETAILS->getColumnVal("GENUS"); 
  $DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record

?>
 </div>
</section>

Answer 2

您的问题似乎是您正在使用此条件创建新行：

if($DETAILS->getColumnVal("GENUS") != $previousCat) 

然后，使用相同的条件结束行。因此，创建行的循环的第一次迭代将始终在第一个 col-md-4div 之后结束该行，因为您只是在之后更改$previousCat的值。但是，更改之前$previousCat的值也可能会在按预期关闭行div 时遇到问题。

对于不太优雅的解决方案，在最后一个条件语句中检查并在第一个条件中设置的布尔变量将起作用。这将允许您确定在该迭代中是否新创建了新行，因此不应在同一迭代中结束。这通常表明要对逻辑进行一些更改。