Bootstrap 5平板端自定义8列网格系统的实现问询

方案一：基于Bootstrap Sass自定义（推荐） #

Bootstrap的网格系统由Sass变量驱动，你可以通过自定义断点下的列类，实现平板端8列布局，同时保留原有12列系统的功能：

1. 在你的Sass文件中，针对平板断点（默认768px）编写循环生成8列网格类：

// 定义平板断点（和Bootstrap默认md断点一致）
$breakpoint-md: 768px;

// 生成平板端8列的宽度类（1/8到8/8）
@media (min-width: $breakpoint-md) {
  @for $i from 1 through 8 {
    .col-md-#{$i}-8 {
      flex: 0 0 percentage($i / 8);
      max-width: percentage($i / 8);
      padding-right: 0; // 取消列间距，按需求设置
      padding-left: 0;
    }
  }

  // 平板端8列等宽类（多个.col-md-8会自动均分宽度）
  .col-md-8 {
    flex: 1 0 0%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  // 可选：取消row的左右margin，彻底移除间距
  .row {
    margin-left: 0;
    margin-right: 0;
  }
}

使用时直接调用自定义类即可满足需求：

• 单个元素占3/8宽度：<div class="col-md-3-8"></div>
• 三个等宽列布局：重复使用<div class="col-md-8"></div>，flex会自动均分8列宽度
• 单个元素占5/8宽度：<div class="col-md-5-8"></div>

方案二：纯CSS自定义（无需Sass） #

如果项目没有使用Sass，直接写CSS媒体查询也能实现：

/* 平板端（768px及以上）8列网格样式 */
@media (min-width: 768px) {
  .col-md-1-8 { width: 12.5%; }
  .col-md-2-8 { width: 25%; }
  .col-md-3-8 { width: 37.5%; }
  .col-md-4-8 { width: 50%; }
  .col-md-5-8 { width: 62.5%; }
  .col-md-6-8 { width: 75%; }
  .col-md-7-8 { width: 87.5%; }
  .col-md-8-8 { width: 100%; }

  /* 等宽列类 */
  .col-md-8 {
    flex: 1 0 0%;
    max-width: 100%;
  }

  /* 取消列间距 */
  .row > .col-md-*-8,
  .row > .col-md-8 {
    padding-left: 0;
    padding-right: 0;
  }

  /* 可选：取消row的左右margin */
  .row {
    margin-left: 0;
    margin-right: 0;
  }
}

注意事项 #

• 原有Bootstrap 12列的col-md-*类依然可以正常使用，新的8列类与原有系统完全兼容，按需选择即可
• 如果需要保留部分间距，可以调整padding-left和padding-right的值，不一定设为0
• 测试时覆盖平板断点的所有宽度区间，确保布局符合设计师的需求

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