如何通过选择Bootstrap col第n个元素实现不等宽卡片布局？

需求明确 #

• 布局要求：顶部两个卡片宽度分别占67%、33%，底部两个卡片反过来，占33%、67%；
• 交互要求：新增卡片时，新卡片插在第一个位置，原来的第一个自动挪到第二个位置；
• 疑问：能不能通过定位Col组件的第n个元素来修改宽度？

实现方案 #

完全可以，Bootstrap 4的栅格基于flex布局，结合:nth-child()选择器就能轻松实现这个需求，不用修改Bootstrap核心样式。

1. HTML结构示例 #

先搭好基础的行和Col结构，给不同行加标识类方便区分：

<div class="container">
  <!-- 顶部行 -->
  <div class="row card-group">
    <div class="col card">卡片1</div>
    <div class="col card">卡片2</div>
  </div>
  <!-- 底部反向行 -->
  <div class="row card-group reverse">
    <div class="col card">卡片3</div>
    <div class="col card">卡片4</div>
  </div>
</div>

2. SCSS样式设置 #

用:nth-child()针对不同行的Col设置宽度，比例和Bootstrap的col-8、col-4对应（66.6667%和33.3333%）：

// 顶部行：第一个Col占67%，第二个占33%
.card-group:not(.reverse) .col:nth-child(1) {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}
.card-group:not(.reverse) .col:nth-child(2) {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

// 底部反向行：第一个Col占33%，第二个占67%
.card-group.reverse .col:nth-child(1) {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.card-group.reverse .col:nth-child(2) {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}

// 卡片基础样式（按需调整）
.card {
  padding: 1.5rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.3rem;
  margin-bottom: 1.2rem;
}

3. 新增卡片的交互逻辑 #

新增卡片时，直接把新元素插到目标行的最前面就行，:nth-child()会自动识别新的顺序，样式自动适配：

// 给顶部行加新卡片的示例
function addNewTopCard() {
  const newCard = document.createElement('div');
  newCard.className = 'col card';
  newCard.innerText = `新卡片${new Date().getTime()}`;
  document.querySelector('.card-group:not(.reverse)').prepend(newCard);
}

比如原来的“卡片1”是第1个Col，插新卡片后它变成第2个，自动应用33%的宽度，新卡片则用67%的宽度，完全符合需求。

注意点 #

• 要保证每行始终只有2个Col，不然:nth-child()的匹配会出错；
• 用flex和max-width是为了和Bootstrap栅格逻辑对齐，避免出现布局冲突；
• 如果要做响应式，加媒体查询就行，比如小屏幕下让所有Col占100%宽度：

@media (max-width: 767px) {
  .card-group .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

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