本文详解因 html 结构嵌套错误导致的 bootstrap 小卡片（如仪表盘统计块）在第二行及后续行中脱离容器边界的问题，并提供两种规范的循环结构方案与关键注意事项。
本文详解因 html 结构嵌套错误导致的 bootstrap 小卡片（如仪表盘统计块）在第二行及后续行中脱离容器边界的问题，并提供两种规范的循环结构方案与关键注意事项。
在使用 Bootstrap 构建响应式仪表盘时，常见的“小卡片”（small-box）组件常配合 row + col-* 网格系统布局。但开发者容易陷入一个典型误区：为每个卡片单独包裹一层 .row——正如原始代码所示，连续嵌套多个 <div class="row">，且未将其置于 .container 或 .container-fluid 内。这直接破坏了 Bootstrap 的网格流式布局机制，导致：
- 每个 .row 默认拥有 -15px 的左右外边距（margin-left: -15px; margin-right: -15px）；
- 当多个 .row 层叠出现时，负边距持续累积，使内部列（.col-*）向左偏移，最终超出父容器可视区域；
- 第一行看似正常，是因为首层 .row 的偏移尚未被上层容器约束；而后续行叠加后偏移加剧，视觉上表现为“卡片滑出右侧边界”。
✅ 正确做法是：所有卡片应统一置于单个 .row 内，由该行统一管理列的浮动与间距；同时确保该 .row 被包裹在语义化的容器（如 .container）中。
✅ 推荐结构：单行内循环卡片（Looping Option 1）
这是最常用、最灵活的方式，适用于动态渲染任意数量的卡片（如从数据库查询的统计项）：
<section>
<div class="container-fluid"> <!-- 或 container，根据设计需求 -->
<div class="row">
<!-- ✅ 循环开始：每个卡片作为 col-lg-3 col-xs-6 -->
<?php foreach ($stats as $stat): ?>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="small-box bg-hc">
<div class="inner text-hc">
<h3><?php echo number_format($stat['total'], 2); ?> AED</h3>
<p><?php echo htmlspecialchars($stat['label']); ?></p>
</div>
<div class="icon">
<i class="fa fa-<?php echo $stat['icon']; ?>"></i>
</div>
<a href="<?php echo $stat['url']; ?>" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<?php endforeach; ?>
<!-- ✅ 循环结束 -->
</div>
</div>
</section>? 提示：col-lg-3（每行最多 4 个）、col-md-4（中屏每行 3 个）、col-sm-6（小屏每行 2 个）、col-xs-12（超小屏堆叠）确保全设备适配。
✅ 替代结构：按行分组循环（Looping Option 2）
当需严格控制每行固定数量（如始终 4 列），且数据量较大时，可对数据预分组，再循环行：
<?php
$chunks = array_chunk($stats, 4); // 每 4 个一组
?>
<section>
<div class="container-fluid">
<?php foreach ($chunks as $chunk): ?>
<div class="row">
<?php foreach ($chunk as $stat): ?>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="small-box bg-hc">
<div class="inner text-hc">
<h3><?php echo number_format($stat['total'], 2); ?> AED</h3>
<p><?php echo htmlspecialchars($stat['label']); ?></p>
</div>
<div class="icon">
<i class="fa fa-<?php echo $stat['icon']; ?>"></i>
</div>
<a href="<?php echo $stat['url']; ?>" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>
</section>⚠️ 关键注意事项
- 禁止嵌套 .row：.row 只能直接子元素为 .col-*，不可互相嵌套，也不可作为其他 .row 的子元素；
- 容器必不可少：.row 必须置于 .container 或 .container-fluid 内，否则负边距无父级约束，必然溢出；
- 列宽总和需为 12：Bootstrap 4/5 中，单行内所有 .col-* 的数值之和建议为 12（如 col-lg-3 × 4），避免换行错位；
- PHP 逻辑优化：原始代码中重复执行相同 SQL 查询 5 次，应提取为一次查询 + 循环计算，提升性能；
- 安全输出：使用 htmlspecialchars() 转义动态内容，防止 XSS；
- 响应式断点校验：检查 col-lg-3 col-xs-6 是否符合实际视口行为（注意：Bootstrap 4+ 已弃用 xs 前缀，应写作 col-6；若用 Bootstrap 3，请保持 col-xs-6）。
遵循以上结构与规范，即可彻底解决小卡片跨行溢出问题，构建稳定、可维护、响应式的仪表盘布局。
