点击snimka1.html链接失效，删除panel-thumbnail后布局异常如何解决

算力阿峰

2026-9-27

你遇到的问题和div嵌套数量无关，核心是两个原因：

你引用的是Bootstrap 5版本，但panel、panel-thumbnail是Bootstrap 3的专属组件，Bootstrap 5已经完全移除了这些组件的默认样式，会导致容器布局异常，出现层级遮挡或者点击事件无法穿透到内部a标签的问题。
你给图片加的img-responsive类也是Bootstrap 3的样式类，Bootstrap 5中对应的响应式图片类为img-fluid，类名不匹配也是导致图片偏移的原因之一。

方案1：替换为Bootstrap 5原生Card组件（推荐）

直接用Bootstrap 5官方支持的Card组件替换废弃的Panel结构，既可以保留原有的卡片展示效果，也不会出现点击异常问题，代码示例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-xs-6">
      <div class="card">
        <div class="card-body text-center p-3">
          <a href="snimka1.html" target="_blank">
            <img src="https://via.placeholder.com/150" class="img-fluid d-block mx-auto" alt="business">
          </a>
          <p class="mt-3">Клеопатра 2,4X 3,2 см</p>
        </div>
      </div>
    </div>
  </div>
</div>

方案2：保留原有结构，补充自定义样式

如果不想改结构，只需补充缺失的样式、修正图片类名即可：

在你的样式表中加入以下代码：

.panel-thumbnail {
  padding: 15px;
  text-align: center;
  pointer-events: auto;
}
.panel {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.panel-body {
  padding: 15px;
}