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

您的问题似乎是您正在创建具有以下条件的新行：

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

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

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

Answer 2

我提出的解决方案是从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>

在PHP代码中，col-md-4 divs并排显示在彼此之下

2 个答案: