如何通过CSS/Bootstrap实现1-4个面板的响应式网格列宽适配需求？

不用硬编码所有组合啦！用Bootstrap的基础网格系统加上几行自定义CSS就能完美实现你要的效果，后端代码可以简化很多，不用写那些繁琐的if判断。

先理清楚咱们要实现的断点规则，再一步步来：

先明确需求对应规则 #

• 大屏（md及以上，也就是≥768px）：
  • 1个面板：占满整行（12列）
  • 2个面板：各占50%（6列）
  • 3个面板：各占1/3（4列）
  • 4个面板：各占25%（3列）
• 小屏（<768px）：
  • 1个面板：占满整行
  • 2个面板：各占50%
  • 3个面板：前两个各占50%，第三个占满整行
  • 4个面板：各占50%

实现方法：Bootstrap + 自定义CSS #

首先简化你的后端代码，不用在循环里判断列宽，直接给每个面板加基础类，然后用CSS根据子元素数量自动调整：

第一步：简化HTML结构

把后端循环的代码改成这样，不用再计算colmd变量：

<div class="row panel-grid">
  @foreach (var panel in myPanels) {
    <div class="panel-item">
      <DynamicComponent Type="@(panel.Type)" />
    </div>
  }
</div>

第二步：添加自定义CSS

利用CSS的结构伪类选择器，针对不同数量的面板和断点做适配：

/* 基础样式：继承Bootstrap row的gutter，给面板加基础列属性 */
.panel-grid {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.panel-grid .panel-item {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* 小屏（<768px）适配 */
@media (max-width: 767.98px) {
  /* 默认小屏每个面板占50%，对应4个和2个的情况 */
  .panel-grid .panel-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* 1个面板时占满整行 */
  .panel-grid .panel-item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 3个面板时，第三个占满整行 */
  .panel-grid .panel-item:nth-last-child(1):nth-child(3) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* 大屏（≥768px）适配 */
@media (min-width: 768px) {
  /* 默认4个面板时各占25% */
  .panel-grid .panel-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
  /* 1个面板时占满整行 */
  .panel-grid .panel-item:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 2个面板时各占50% */
  .panel-grid .panel-item:nth-last-child(2):first-child,
  .panel-grid .panel-item:nth-last-child(2):first-child ~ .panel-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* 3个面板时各占1/3 */
  .panel-grid .panel-item:nth-last-child(3):first-child,
  .panel-grid .panel-item:nth-last-child(3):first-child ~ .panel-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

另一种更简洁的方案：CSS Grid #

如果你的项目兼容现代浏览器（支持CSS :has 选择器），可以用CSS Grid来实现，代码更简洁：

.panel-grid {
  display: grid;
  gap: 1.5rem; /* 对应Bootstrap的gutter间距 */
  padding: 0 0.75rem;
}

/* 小屏适配 */
@media (max-width: 767.98px) {
  .panel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 1个面板时占满整行 */
  .panel-grid:has(> .panel-item:only-child) {
    grid-template-columns: 1fr;
  }
  /* 3个面板时，第三个占满整行 */
  .panel-grid:has(> .panel-item:nth-child(3)):not(:has(> .panel-item:nth-child(4))) > .panel-item:last-child {
    grid-column: 1 / -1;
  }
}

/* 大屏适配 */
@media (min-width: 768px) {
  .panel-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 1个面板 */
  .panel-grid:has(> .panel-item:only-child) {
    grid-template-columns: 1fr;
  }
  /* 2个面板 */
  .panel-grid:has(> .panel-item:nth-child(2)):not(:has(> .panel-item:nth-child(3))) {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 3个面板 */
  .panel-grid:has(> .panel-item:nth-child(3)):not(:has(> .panel-item:nth-child(4))) {
    grid-template-columns: repeat(3, 1fr);
  }
}

为什么不用硬编码？ #

这些CSS选择器会自动识别父元素下的子元素数量，不管是1、2、3还是4个面板，都会自动应用对应的宽度规则，后端代码只需要循环输出面板即可，不用再维护那些if判断逻辑，后续如果需求有小调整，只需要修改CSS就行。

内容来源于stack exchange