Bootstrap 3：跨两行列的屏幕适配布局（消除间隙+等高列需求）

嘿，看起来你已经离目标很近啦！针对你遇到的两个小问题——Results和Stats/Perf的间隙、Winner列撑满高度对齐Perf底部，咱们用CSS Grid来搞定会非常顺手，下面给你详细的方案：

核心思路 #

大屏端用Grid实现「左侧Winner跨两行+右上角Results+右侧Stats/Perf」的布局，移动端则垂直堆叠，同时通过Grid的特性自动解决高度和间隙问题。

完整代码示例 #

HTML结构（可根据你的实际DOM结构调整） #

<div class="dashboard">
  <div class="dashboard__item dashboard__winner">Winner</div>
  <div class="dashboard__item dashboard__stats">Stats</div>
  <div class="dashboard__item dashboard__perf">Perf</div>
  <div class="dashboard__item dashboard__results">Results</div>
</div>

CSS样式 #

/* 基础布局：统一容器样式 */
.dashboard {
  display: grid;
  gap: 1rem; /* 全局控制元素间隙，可按需调整 */
  padding: 1rem;
  min-height: 100vh; /* 可选：让仪表盘占满视口高度 */
}

.dashboard__item {
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 移动端布局：垂直堆叠所有元素 */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
}

/* 大屏端布局：实现右上角Results+Winner撑满高度 */
@media (min-width: 769px) {
  .dashboard {
    /* 定义Grid模板：2列（左侧宽，右侧窄），2行（第一行自适应高度，第二行占剩余空间） */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto 1fr;
    /* 用模板区域清晰划分各元素位置 */
    grid-template-areas:
      "winner results"
      "winner perf-stats";
  }

  /* 让Winner跨两行，自动撑满左侧高度 */
  .dashboard__winner {
    grid-area: winner;
    background-color: #f8f9fa;
    /* Grid默认align-items: stretch，无需额外设置高度即可填满行高 */
  }

  /* Results放在右上角，设置自适应宽度实现「较小尺寸」 */
  .dashboard__results {
    grid-area: results;
    justify-self: end; /* 靠右对齐 */
    width: fit-content; /* 宽度随内容自适应 */
    background-color: #e9ecef;
  }

  /* 把Stats和Perf放在同一区域，按需调整垂直位置 */
  .dashboard__stats {
    grid-area: perf-stats;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #dee2e6;
  }

  .dashboard__perf {
    grid-area: perf-stats;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: end; /* 让Perf靠底部对齐，和Winner底部齐平 */
    background-color: #ced4da;
  }
}

问题针对性解决 #

1. 消除Results与Stats/Perf的间隙

   • 用Grid容器的gap属性统一控制所有元素间的间距，避免单个元素加margin导致的间隙不一致。
   • Results通过justify-self: end靠右对齐，不会占用右侧列的全部宽度，自然不会和下方的Stats/Perf产生多余空隙。

2. 让Winner列撑满高度对齐Perf底部

   • 在大屏端给Winner设置grid-row: 1 / 3（或用模板区域winner跨两行），Grid会自动拉伸Winner的高度，填满两行的总高度，刚好和底部的Perf对齐。
   • 如果需要Perf也靠底部，给Perf加align-self: end即可完美匹配Winner的底部高度。

额外小提示 #

如果你的Stats和Perf需要在右侧上下排列，只需要调整大屏端的Grid模板即可：

@media (min-width: 769px) {
  .dashboard {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "winner results"
      "winner stats"
      "winner perf";
  }
}

这样就能根据你的实际需求灵活调整啦！

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