Bootstrap 4列宽适配问题：使末行列宽度匹配整行总宽度

我之前也碰到过和你一模一样的布局需求——不同断点下每行列数不同，同时要让最后一行的总宽度和上方满行的总宽度保持一致。下面给你一套实用的解决方案，兼顾动态内容场景：

核心思路 #

利用Bootstrap 4的row-cols系列类定义不同屏幕下的每行列数，再通过CSS媒体查询+伪类选择器，自动调整最后一行剩余列的宽度，确保其总宽度和上方满行一致。

完整实现代码 #

HTML结构 #

<div class="container my-4">
  <!-- 总列数为7的示例 -->
  <h3>总列数为7的布局</h3>
  <div class="row row-cols-xl-3 row-cols-md-4 row-cols-sm-2 g-3">
    <div class="col">列1</div>
    <div class="col">列2</div>
    <div class="col">列3</div>
    <div class="col">列4</div>
    <div class="col">列5</div>
    <div class="col">列6</div>
    <div class="col">列7</div>
  </div>

  <!-- 总列数为8的示例 -->
  <h3 class="mt-5">总列数为8的布局</h3>
  <div class="row row-cols-xl-3 row-cols-md-4 row-cols-sm-2 g-3">
    <div class="col">列1</div>
    <div class="col">列2</div>
    <div class="col">列3</div>
    <div class="col">列4</div>
    <div class="col">列5</div>
    <div class="col">列6</div>
    <div class="col">列7</div>
    <div class="col">列8</div>
  </div>
</div>

自定义CSS #

/* 桌面端（≥1200px）：每行3列 */
@media (min-width: 1200px) {
  /* 最后只剩1列时，占满整行（和上方3列总宽度一致） */
  .row.row-cols-xl-3 > .col:nth-last-child(1):nth-child(3n+1) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 最后剩2列时，各占50%，总宽度和上方3列一致 */
  .row.row-cols-xl-3 > .col:nth-last-child(2):nth-child(3n+1),
  .row.row-cols-xl-3 > .col:nth-last-child(2):nth-child(3n+1) ~ .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 平板端（768px-1199px）：每行4列 */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* 最后剩1列：占满整行 */
  .row.row-cols-md-4 > .col:nth-last-child(1):nth-child(4n+1) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 最后剩2列：各占50% */
  .row.row-cols-md-4 > .col:nth-last-child(2):nth-child(4n+1),
  .row.row-cols-md-4 > .col:nth-last-child(2):nth-child(4n+1) ~ .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* 最后剩3列：各占33.33%，总宽度和上方4列一致 */
  .row.row-cols-md-4 > .col:nth-last-child(3):nth-child(4n+1),
  .row.row-cols-md-4 > .col:nth-last-child(3):nth-child(4n+1) ~ .col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* 移动端（≤767px）：每行2列 */
@media (max-width: 767.98px) {
  /* 最后只剩1列时，占满整行 */
  .row.row-cols-sm-2 > .col:nth-last-child(1):nth-child(2n+1) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* 以下是示例样式，方便可视化，可根据需求删除 */
.col {
  background-color: #e9ecef;
  border: 1px solid #dee2e6;
  padding: 1rem;
}

方案说明 #

1. 基础布局：用row-cols-xl-3 row-cols-md-4 row-cols-sm-2直接定义不同断点下的每行列数，g-3控制列间距，可根据需求调整。
2. 自动适配逻辑：通过CSS伪类nth-last-child和nth-child(3n+1)这类选择器，精准判断最后一行剩余的列数，自动调整宽度：
   • 桌面端7列时，第7列会自动占满整行；8列时，第7、8列各占50%，总宽度和上方3列一致。
   • 平板和移动端也做了对应适配，确保全场景下的布局一致性。
3. 动态内容兼容：如果你的列是后端动态生成的，这套方案完全适用，不需要手动给最后几列加特殊类，CSS会自动匹配处理。

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