本文详解如何将数据库查询结果逐项输出为 Bootstrap 的独立 col-md-2 列，避免嵌套错误导致所有内容挤在同一列，并提供结构规范、语义清晰的 HTML 输出方案。
本文详解如何将数据库查询结果逐项输出为 bootstrap 的独立 `col-md-2` 列，避免嵌套错误导致所有内容挤在同一列，并提供结构规范、语义清晰的 html 输出方案。
在使用 Bootstrap 布局动态渲染数据库记录时，一个常见误区是：在循环内部重复创建 .row 容器。如原始代码所示，每次 while 迭代都输出 <div class="row"> 和闭合标签，这会导致每个广告项被包裹在独立的行中（即垂直堆叠），而非水平并排显示于同一行——这与期望的“一行多列”布局完全相悖。<p>正确的做法是：<strong>将 <code>.row 容器置于循环外部，仅循环生成 .col-md-2 子列。这样所有列元素共享同一父行容器，Bootstrap 的栅格系统才能按预期计算宽度并水平排列。以下是优化后的完整代码：
<?php
$sql = "SELECT advertiser_URL, advertiser_logo FROM advertisers";
if ($result = mysqli_query($link, $sql)) {
if (mysqli_num_rows($result) > 0) {
// ✅ 正确：.row 开标签仅在循环外声明一次
echo '<div class="row">';
while ($row = mysqli_fetch_array($result)) {
// ✅ 每个广告项作为独立的 col-md-2 列
echo '<div class="col-md-2">';
echo '<a href="' . htmlspecialchars($row['advertiser_URL']) . '">';
echo '<img src="data:image/jpeg;base64,' . base64_encode($row['advertiser_logo']) . '" alt="Advertiser logo" class="img-fluid"/>';
echo '</a>';
echo '</div>';
}
// ✅ 正确：.row 闭标签在循环结束后统一关闭
echo '</div>';
} else {
echo '<p>No records matching your query were found.</p>';
}
} else {
echo '<p>ERROR: Could not execute query. ' . mysqli_error($link) . '</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>';
}
?>⚠️ 关键注意事项：
-
安全增强：使用
htmlspecialchars()对 URL 进行转义，防止 XSS 攻击； -
图片健壮性：添加
alt属性提升可访问性，并应用img-fluid类确保响应式缩放； -
Bootstrap 版本兼容性：
col-md-2在 Bootstrap 4/5 中有效；若使用 Bootstrap 3，请确认类名一致（语法相同）； -
列数控制：
col-md-2理论上一行最多容纳 6 列（12 ÷ 2 = 6）。若数据超过 6 条，Bootstrap 会自动换行，无需额外处理； - 空格与缩进：HTML 中列元素间建议保留换行或空格，避免浏览器因文本节点缺失导致意外间隙（尤其在内联块级布局中）。
通过这一结构调整，三个广告项将真正并排显示于同一行，每项占据 2 列宽度（即约 16.67% 页面宽度），实现整洁、响应式的横向陈列效果。
