怎样使用CSS网格重新定义Bootstrap 4的非等宽排列布局-css教程-PHP中文网

Bootstrap 4 的 .row 不是 CSS Grid 容器，直接设 display: grid 会破坏布局；应另建独立 Grid 容器（如 .card-grid），用 grid-template-areas 实现「1+4」主副结构，并移除混用的 .col-* 类及可能冲突的 margin/padding 工具类。

怎样使用css网格重新定义bootstrap 4的非等宽排列布局

Bootstrap 4 的 .row 不是 CSS Grid 容器

直接给 .row 加 display: grid 会破坏原有布局逻辑——因为 Bootstrap 4 的 .row 依赖 Flexbox 实现列对齐、负边距抵消和断点响应，强行切到 Grid 后，.col-* 类的宽度计算（基于 flex 和 max-width）会失效，常见现象是列堆叠、间距错乱、断点类完全不生效。

真正可行的做法是：**放弃复用 .row 和 .col-* 类组合，另起一套 Grid 布局容器**。你仍可保留 Bootstrap 4 的工具类（如 mt-3、p-2），但网格结构必须独立声明。

把需要非等宽排列的区域单独包裹进一个 <div class="my-grid">，并在 CSS 中定义 <code>display: grid
不要在该容器内混用 .col-md-6 这类类名；它们和 Grid 的 grid-column 规则无关联
若需响应式列数变化，用 @media 覆盖 grid-template-columns，而非依赖 Bootstrap 断点类

用 grid-template-areas 实现「1+4」主副结构

这是最直观对应你知识库中「左侧主卡 + 右侧 2×2 卡片」需求的方式。不用算比例、不依赖 12 列，语义清晰且易维护。

示例结构：

立即学习“前端免费学习笔记（深入）”；

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

<div class="card-grid">
  <div class="card-main">主内容</div>
  <div class="card-a">A</div>
  <div class="card-b">B</div>
  <div class="card-c">C</div>
  <div class="card-d">D</div>
</div>

CSS 定义：

.card-grid {
  display: grid;
  grid-template-areas:
    "main a b"
    "main c d";
  grid-gap: 1rem;
}
.card-main { grid-area: main; }
.card-a { grid-area: a; }
.card-b { grid-area: b; }
.card-c { grid-area: c; }
.card-d { grid-area: d; }

@media (max-width: 991.98px) {
  .card-grid {
    grid-template-areas:
      "main"
      "a"
      "b"
      "c"
      "d";
  }
}

grid-template-areas 必须每行引号内字符数一致，空格分隔不同区域名
移动端回退为单列时，grid-gap 仍生效，比 Bootstrap 的 gutters 更可控
注意：所有子元素必须有明确 grid-area，否则会被挤到首行末尾

避免 grid 与 Bootstrap margin/padding 冲突

Bootstrap 4 的 .mt-3、.p-2 等工具类会直接作用于 Grid 子项，容易导致间隙叠加或尺寸溢出。尤其当卡片本身带 .card 类时，其默认 margin-bottom: 0.5rem 会和 grid-gap 叠加。

优先用 grid-gap 控制子项间距，移除子项上所有 m-* / p-* 类
若需保留某些内边距（如卡片内容区），只加在子项内部容器上，例如：<div class="card p-3"><div class="card-body">... <li> <code>.container 或 .container-fluid 可照常使用，它们只是外层约束，不影响内部 Grid 计算