切换Bootstrap卡片后页面元素偏移问题求助

核心触发点：垂直滚动条导致的视口宽度变化 #

• 插入卡片的内容量远大于搜索卡片，展开后页面总高度超出浏览器视口高度，浏览器自动添加垂直滚动条。滚动条会占据15-20px的视口宽度，原本无滚动条时页面元素的居中是基于完整视口宽度计算的，滚动条出现后可用宽度减少，所有居中元素会向左偏移对应滚动条的宽度。
• 删除插入卡片的部分元素后，页面高度未超过视口，不会触发滚动条，因此元素能保持居中对齐。

布局逻辑不一致加剧偏移 #

• 搜索卡片使用Bootstrap栅格系统的col-md-6 offset-md-3实现居中（占据6列宽度，左右各偏移3列），计算基准是父容器宽度。
• 插入卡片使用自定义的.gruppo-2类（width:50%; margin-left: auto; margin-right: auto），计算基准是当前视口宽度。当滚动条出现导致视口宽度变化时，两种居中逻辑的计算基准不一致，进一步放大了偏移效果。

潜在DOM结构问题 #

搜索表单代码中存在无对应起始标签的闭合标签：

</span>

该标签会导致浏览器渲染DOM时出现结构异常，间接影响布局稳定性。

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