本文详解如何将数据库查询结果中的每个广告商信息渲染为独立的 Bootstrap col-md-2 列，避免嵌套错误导致所有内容挤在同一列，确保响应式横向布局正确生效。
本文详解如何将数据库查询结果中的每个广告商信息渲染为独立的 bootstrap `col-md-2` 列，避免嵌套错误导致所有内容挤在同一列，确保响应式横向布局正确生效。
在使用 Bootstrap 构建响应式网格布局时，一个常见误区是：在循环内部重复输出 .row 容器——这会导致每条记录都生成一个新行，而每行内仅含一个列（.col-md-2），不仅违背栅格语义，还可能因未闭合或浮动累积引发样式错乱。正确的做法是将 .row 作为外层容器一次性包裹所有列元素，让每个数据项仅生成一个 .col-md-2 子列。
以下是修正后的完整代码示例：
<?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 text-center">';
echo '<a href="'%20.%20htmlspecialchars(%24row['advertiser_URL'])%20.%20'">';
echo '@@##@@';
echo '</a>';
echo '</div>';
}
echo '</div>'; // ✅ 关闭 row 容器
} else {
echo '<p class="text-muted">No records matching your query were found.</p>';
}
} else {
echo '<div class="alert alert-danger">ERROR: Could not execute query. ' . mysqli_error($link) . '</div>';
}
?>
关键改进说明：
-
结构合规：
.row仅声明一次，所有.col-md-2并列其内，符合 Bootstrap 4/5 栅格系统规范（即.row→ 多个.col-*）； -
安全增强：使用
htmlspecialchars()转义 URL，防止 XSS 攻击； -
体验优化：添加
text-center居中对齐、img-fluid保证图片响应式缩放、alt属性提升可访问性； -
容错提示：错误和空结果均采用语义化 HTML（如
alert、text-muted），与 Bootstrap 样式自然融合。
⚠️ 注意事项：
- 确保页面已正确引入 Bootstrap CSS（推荐使用 CDN）；
- 若列数超过 12（如 7 个
col-md-2），Bootstrap 会自动换行，无需额外处理； - 建议对
advertiser_logo字段做非空判断，避免 base64 编码空值报错（可加!empty($row['advertiser_logo'])条件）； - 生产环境应避免直接存储大图二进制至数据库，推荐改为存储路径，提升性能与可维护性。
通过此结构，3 条广告商数据将并排显示为 3 个宽度各占 2 列（共 6 列宽）的响应式卡片，后续新增数据也将自动横向延展，真正实现灵活、健壮的栅格布局。
%20.%20')
