如何复制带3D翻转卡片的div实现HTML多行列画廊

一、原生CSS实现4行多列画廊（无Bootstrap冲突） #

不用Bootstrap也能轻松实现自适应多行列布局，推荐用CSS Grid，复制卡片div后可自动排列：

1. 调整HTML结构 #

给所有卡片套一个画廊容器：

<div class="card-gallery">
  <!-- 第一个翻转卡片 -->
  <div class="card-container">
    <div class="card">
      <div class="card-front">
        <img src="front-img.jpg" alt="卡片正面">
      </div>
      <div class="card-back">
        <h3>卡片背面标题</h3>
        <p>背面内容</p>
      </div>
    </div>
  </div>
  <!-- 复制更多card-container即可自动排列 -->
  <div class="card-container">...</div>
  <div class="card-container">...</div>
</div>

2. 添加画廊布局CSS #

用Grid实现自适应列数，同时统一卡片尺寸和间距：

/* 画廊容器 */
.card-gallery {
  display: grid;
  /* 自动填充列，最小宽度250px，剩余空间均分 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 卡片之间的间距 */
  gap: 2rem;
  /* 避免卡片贴边 */
  padding: 2rem;
  /* 限制最大宽度并居中 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 卡片容器（保留3D透视效果） */
.card-container {
  width: 100%;
  height: 350px; /* 固定高度保证布局整齐 */
  perspective: 1000px;
}

/* 原有翻转卡片样式，继承容器宽高 */
.card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card-back {
  transform: rotateY(180deg);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

复制card-container后，Grid会自动将卡片排列成多列，超出后自动换行，满足4行多列的画廊需求。

二、修复Bootstrap与导航栏的冲突 #

如果一定要用Bootstrap，核心是隔离Bootstrap样式范围：

1. 自定义Bootstrap构建 #

去Bootstrap官网仅下载需要的组件：

• 只勾选「Grid system」和「Utilities」，不勾选「Navbar」等其他组件，避免Bootstrap样式污染现有导航栏。

2. 提高导航栏样式优先级 #

给现有导航栏的CSS选择器添加更高优先级，比如给导航栏套<header>父元素后：

header .your-navbar-class {
  /* 你的导航栏原有样式，覆盖Bootstrap可能冲突的属性 */
  margin: 0;
  padding: 1rem;
  background: #222;
  color: #fff;
}

3. 仅给画廊区域用Bootstrap网格 #

不要给整个页面套Bootstrap的container/row，只作用在画廊上：

<!-- 导航栏部分不用Bootstrap类 -->
<nav class="your-navbar-class">...</nav>

<!-- 画廊部分单独用Bootstrap网格 -->
<div class="container">
  <div class="row g-4">
    <div class="col-md-3">
      <div class="card-container">...</div>
    </div>
    <!-- 更多col-md-3卡片 -->
  </div>
</div>

这样Bootstrap样式只会影响画廊区域，不会破坏导航栏布局。

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