PHP+HTML数据库网格布局异常：内容垂直排列而非行列布局

尝试用PHP结合HTML以网格格式展示数据库中的信息，预期每行显示2个卡片（<div class="col">），但实际内容始终垂直排列，每行仅能显示1个卡片。调整<div class="row">的输出位置后问题反而更严重，现有代码及输出如下：

原PHP代码 #

$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Set Vars
$max_columns = 4;
$record_id   = 0;
$sql         = "SELECT * from `" . $_SESSION['userName'] . "_T-table`";
$result      = $conn->query($sql);

$row1 = $result->num_rows;    // Find total rows returned by database
if($row1 > 0) {
    $cols = 2;    // Define number of columns
    $counter = 1;     // Counter used to identify if we need to start or end a row
    $nbsp = $cols - ($row1 % $cols);    // Calculate the number of blank columns
    
    
    while ($rows = $result->fetch_assoc()) {
        if(($counter % $cols) == 1) {    // Check if it's new row
            echo '<div class="row" id="Row 1">';    
        } ?>
        <div class="col" id="Rep1">
            <div class="card text-bg-dark mb-3" id="<?PHP echo $column ?>" style="max-width: 30%; max-height:30%;">
                <img src="/users/<?PHP echo $_SESSION["userName"] ?>/images/<?PHP echo $rows["img_loc"] ?>" class="card-img img-fluid">
                    <div class="card-img-overlay">
                        <h5 class="card-title"><?php echo $rows["scientific_name"] ?>
                            <span class="text-warning-emphasis"><?php echo $row["common_name"]?></span>
                        </h5>
                        Sex: <?PHP echo $rows["t_sex"] ?>
                        <br>
                        <p class="card-text">Name: <?PHP echo $rows["t_name"] ?>
                        <br>
                        Age: <?PHP echo $rows["t_age"] ?>
                        <br>
                        Hatched on: <?PHP echo $rows["hatch_date"] ?>
                        <br>
                        Arrived: <?PHP echo $rows["arrival_date"] ?>
                        <br>
                        Last fed on: <?PHP  echo $rows["last_feed_date"] ?>
                        <br>
                        Food type: <?PHP echo $rows["feed_types"] ?>
                        <br>
                        Last molt: <?PHP echo $rows["last_molt_date"] ?>
                        </p>
                        <p class="card-text"><?PHP echo $rows["t_notes"] ?>
                    </div>
                </div>
            </div>
        </div> 
        <?PHP
        }
        $counter++;    // Increase the counter
    }
    $result->free();
    if($nbsp > 0) { // Add unused column in last row
        for ($i = 0; $i < $nbsp; $i++)  { 
            echo '<div class="col></div>';      
        }
        echo '</div>';
}

输出的HTML #

<div class="row" id="Row 1">                        
    <div class="col" id="Rep1">
        <div class="card text-bg-dark mb-3" id="" style="max-width: 30%; max-height:30%;">
            <img src="/users/xxxxx/images/mj.png" class="card-img img-fluid">
                <div class="card-img-overlay">
                    <h5 class="card-title">assf                                         
                        <span class="text-warning-emphasis"></span>
                    </h5>
                    Sex: asdfa                                      
                    <br>
                    <p class="card-text">Name: 1                                      
                        <br>
                        Age: asdf                                       
                        <br>
                        Hatched on: asdf                                        
                        <br>
                        Arrived: asdf                                       
                        <br>
                        Last fed on: asdf                                       
                        <br>
                        Food type: asdf                                     
                        <br>
                        Last molt: asdf                                     
                    </p>
                    <p class="card-text">                                   
                    </p>
                </div>
            </div>
        </div>
    </div>

核心问题分析 #

1. 循环结构错误：while循环的闭合}写在了卡片HTML输出之后，导致每次循环仅处理一条数据就跳出，无法在同一个row内生成第二个col。
2. row标签未正确闭合：缺少在每$cols个col输出后闭合row的逻辑，导致row无法正常结束，后续的col无法被纳入正确的row容器。
3. 变量与语法错误：
   • $row["common_name"]应为$rows["common_name"]（变量名少了s）；
   • $column变量未定义，导致card的ID为空；
   • 空白col的HTML语法错误：<div class="col>缺少闭合引号。
4. ID重复：所有row和col的ID均重复，违反HTML唯一ID规范。
5. 布局冲突：card的max-width:30%会干扰Bootstrap的网格布局，建议用Bootstrap的col类（如col-md-6）控制每行2个卡片的宽度。

修复后的完整代码 #

$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 设置参数
$sql = "SELECT * from `" . $_SESSION['userName'] . "_T-table`";
$result = $conn->query($sql);

$totalRows = $result->num_rows;
if($totalRows > 0) {
    $colsPerRow = 2; // 每行显示2个卡片
    $counter = 1;
    $rowIndex = 1; // 用于生成唯一的row ID
    
    while ($rows = $result->fetch_assoc()) {
        // 开启新行
        if(($counter % $colsPerRow) == 1) {
            echo '<div class="row" id="Row-' . $rowIndex . '">';
            $rowIndex++;
        }
        ?>
        <div class="col-md-6 mb-3" id="Rep-<?php echo $counter ?>">
            <div class="card text-bg-dark h-100">
                <img src="/users/<?php echo $_SESSION["userName"] ?>/images/<?php echo $rows["img_loc"] ?>" class="card-img img-fluid">
                <div class="card-img-overlay">
                    <h5 class="card-title"><?php echo $rows["scientific_name"] ?>
                        <span class="text-warning-emphasis"><?php echo $rows["common_name"] ?? '' ?></span>
                    </h5>
                    <p>Sex: <?php echo $rows["t_sex"] ?></p>
                    <p class="card-text">
                        Name: <?php echo $rows["t_name"] ?><br>
                        Age: <?php echo $rows["t_age"] ?><br>
                        Hatched on: <?php echo $rows["hatch_date"] ?><br>
                        Arrived: <?php echo $rows["arrival_date"] ?><br>
                        Last fed on: <?php echo $rows["last_feed_date"] ?><br>
                        Food type: <?php echo $rows["feed_types"] ?><br>
                        Last molt: <?php echo $rows["last_molt_date"] ?>
                    </p>
                    <p class="card-text"><?php echo $rows["t_notes"] ?? '' ?></p>
                </div>
            </div>
        </div>
        <?php
        // 闭合当前行
        if(($counter % $colsPerRow) == 0) {
            echo '</div>';
        }
        $counter++;
    }
    $result->free();
    
    // 处理最后一行的剩余空白col（如果有）
    $remainingCols = $colsPerRow - ($totalRows % $colsPerRow);
    if($remainingCols != $colsPerRow) {
        for ($i = 0; $i < $remainingCols; $i++) { 
            echo '<div class="col-md-6"></div>';      
        }
        echo '</div>';
    }
}
$conn->close();

修复说明 #

• 修正了while循环的闭合逻辑，确保能在同一个row内生成多个col；
• 添加了row的闭合判断，每生成$colsPerRow个col后自动闭合row；
• 为row和col生成唯一ID，符合HTML规范；
• 修复了变量名错误和HTML语法错误；
• 使用col-md-6替代自定义宽度，利用Bootstrap原生网格系统实现每行2个卡片的布局；
• 添加了h-100类确保卡片高度一致，mb-3增加间距提升美观度；
• 使用?? ''处理可能为空的字段，避免输出错误。

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