Bootstrap col-sm-3栅格列动态加载后无法横向并排显示问题

DevOps 小满

2026-8-27

布局异常原因

不符合Bootstrap栅格嵌套规则：Bootstrap栅格体系要求，所有带col-*类的列元素，直接父级必须是带row类的容器。row类自带flex布局上下文和负边距，用来抵消col的左右内边距、实现列横向排布。当前代码中#divResPas本身是外层row下的col-md-12列，你直接把后端返回的col-sm-3/col-sm-12元素插入到这个col容器中，缺少了row作为父容器，列自然无法按规则横向排列。之前你直接把#divResPas的class改成row依然异常，是因为row自带的左右负边距会和外层row的布局规则冲突，破坏了和其他同级col（比如顶部导航的col-sm-8、两侧col-sm-2）的对齐关系。
DOM标签嵌套顺序错误：后端输出的每个col-sm-3内容块中，标签闭合顺序写反：开头是，闭合却写成，正确的嵌套闭合顺序应该是先关闭内层标签、再关闭外层标签，也就是。标签顺序错误会导致浏览器渲染时自动补全错位的DOM节点，打乱整体布局结构。另外你循环末尾输出的空col-sm-12分隔块属于冗余栅格元素，多记录场景下会额外打断行布局，完全可以用边距类实现同样的行间距效果。
额外安全问题：后端PHP直接拼接GET参数到SQL语句，存在SQL注入风险。

修复步骤

调整HTML结构，在#divResPas内部嵌套一层专门放列的row容器，避免col直接套col的问题：

<div class="col-md-12" id="divResPas">
  <!-- 后端返回的所有col元素都放到这个内层row中 -->
  <div class="row" id="resPasContent"></div>
</div>

修改JS逻辑，把接口返回内容加载到内层row容器中，而不是直接加载到col容器里：

<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("#btnResPas").on("click",function(){
    $("#resPasContent").load("resPas.php?refClient=<?php echo $refClient?>");
  });
});
</script>

修复PHP代码的标签错误，移除冗余的空col元素，同时做基础的SQL注入防护：

<?php
include("connection.php"); 
$refClient = $_GET['refClient'];
// 转义特殊字符防SQL注入，建议后续改成预处理语句更安全
$refClient = mysqli_real_escape_string($con, $refClient);
$reservationClient = "SELECT * from tblreservation where idClient ='".$refClient."'";
$result = mysqli_query($con,$reservationClient);
if (mysqli_num_rows($result) == 0){
 echo '<div class="col-sm-12" style="text-align:center;"> Pas de réservation </div>';
}else{
 while ($row = mysqli_fetch_array($result)){
   $id = $row['idTblReservation'];
   // 修复标签闭合顺序，加mb-3下边距实现行间距，替代原来的空col
   echo '<div class="col-sm-3 mb-3" style="text-align:center;"><b><u>Date de réservation : </u></b><br>';
   echo $row["dateReservation"];
   echo '</div>';
   echo '<div class="col-sm-3 mb-3" style="text-align:center;"><b><u>Heure : </u></b><br>';
   echo $row["heure"];
   echo '</div>';
   echo '<div class="col-sm-3 mb-3" style="text-align:center;"><b><u>Nombre de personnes : </u></b><br>';
   echo $row["nombreClient"];
   echo '</div>';
   echo '<div class="col-sm-3 mb-3" style="text-align:center;"><a href="modifierResClient.php?id='.$id.'"><br>Modifier</a></div>';
 }
} 
?>

异常效果参考

默认状态下的异常显示效果：
直接将容器改为row后的异常显示效果：

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