如何用CSS3 :nth-child()匹配[1 3 4 6 7 9...]序列实现Bootstrap网格布局

嘿，我来帮你搞定这个问题！首先咱们先拆解你要匹配的卡片序列：1、3、4、6、7、9…，仔细看会发现这个序列其实是两个规律子序列的组合：

• 所有除以3余1的位置：1、4、7、10…
• 所有能被3整除的位置：3、6、9、12…

对应CSS3的:nth-child()选择器，把这两个规则组合起来，就能精准命中你要的所有卡片啦！

第一步：用正确的:nth-child()选择器匹配目标卡片 #

直接用以下选择器组合，就能给指定卡片加上margin-top: -195px：

.card:nth-child(3n+1),
.card:nth-child(3n) {
  margin-top: -195px;
}

• :nth-child(3n+1)：n从0开始计算，选中第1、4、7…个元素
• :nth-child(3n)：n从1开始计算，选中第3、6、9…个元素
  两者叠加正好覆盖你需要的不规则序列。

第二步：重构Bootstrap布局解决间隙问题 #

之前用多行col-md-6因为奇数元素产生间隙，咱们改成3列单行布局，不管元素总数是奇数还是偶数，都能完美按列对齐：

方案1：用Bootstrap原生网格 #

直接用row+col-md-4实现3列布局，这样每行固定3个卡片，不会出现间隙：

<div class="row g-3">
  <div class="col-md-4 card">卡片1</div>
  <div class="col-md-4 card">卡片2</div>
  <div class="col-md-4 card">卡片3</div>
  <div class="col-md-4 card">卡片4</div>
  <div class="col-md-4 card">卡片5</div>
  <div class="col-md-4 card">卡片6</div>
  <div class="col-md-4 card">卡片7</div>
  <div class="col-md-4 card">卡片8</div>
  <div class="col-md-4 card">卡片9</div>
</div>

方案2：用CSS Column布局更灵活 #

如果需要更纯粹的按列排列（比如卡片高度不一致时也能保持列顺序），可以用CSS Column：

.card-container {
  columns: 3; /* 设置3列 */
  column-gap: 1rem; /* 和Bootstrap的gap保持一致 */
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 195px; /* 因为设置了负margin，顶部加padding避免卡片被截断 */
}

.card {
  break-inside: avoid; /* 防止卡片被列分割 */
  margin-bottom: 1rem;
  /* 加上Bootstrap卡片的基础样式 */
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
}

HTML结构就用一个简单的容器包裹所有卡片即可：

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <!-- 更多卡片 -->
</div>

小提示 #

因为设置了margin-top: -195px，可能会导致顶部的卡片超出容器，记得给容器加上padding-top: 195px来避免这个问题哦！

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