Bootstrap 5 栅格系统：为什么别人一行代码对齐，我掉坑3小时？

系列 ② | 目标：用完这篇，你也能把“左边logo、右边导航、中间banner”这种经典布局，像拼七巧板一样咔咔搞定。

1. 开场吐槽：写死width: 25%的，都哭了

还在给div写死width: 25%？
→ 老板手机一打开，横向滑不动，纵向全是缝。
→ 测试小姐姐一句“适配了吗”，你连夜把@media写到800行。
别卷！Bootstrap 5的栅格（Grid）就是官方给你写好的“响应式乐高”，移动先行、12列布局、一行class走天下。

2. 核心概念：12列、断点、行+列

先背口诀，再实操：

1. 12列：一行最多12份，想占几份写几份。
2. 断点：xs sm md lg xl xxl，对应屏幕从小到大。
3. 结构：.container→.row→.col-*，俄罗斯套娃不许乱。

3. 最常用写法：一行四列，自动换行

<div class="container">
  <div class="row g-3"><!-- g-3是列间距 -->
    <div class="col-6 col-md-3">
      <img src="1.jpg" class="img-fluid" alt="">
    </div>
    <!-- 重复4次 -->
  </div>
</div>

解读：

• col-6：手机占6/12（一半）
• col-md-3：≥768px时占3/12（四分之一）
  一句话：手机两列，iPad四列，不用自己写@media！

4. 对齐魔法：水平+垂直，一行class搞定

示例：上下左右都居中（万能登录框）

<div class="container min-vh-100 d-flex align-items-center justify-content-center">
  <div class="row">
    <div class="col-11 col-sm-8 col-md-6 col-lg-4">
      <div class="card p-4">
        <h3>登录</h3>
        ...
      </div>
    </div>
  </div>
</div>

min-vh-100：屏幕多高，我就多高；
d-flex+align-items-center：垂直居中；
justify-content-center：水平居中。
写完这句，90%的登录页就定型了。

5. 混合排版：左边固定，右边自适应

需求：左侧导航固定300px，右侧内容随屏宽变化。
Bootstrap 5提供新的栅格等级+g-0去缝，代码如下：

<div class="container-fluid">
  <div class="row g-0">
    <!-- 左侧：固定宽度 -->
    <div class="col-auto" style="width:300px;">
      <nav class="bg-light p-3">导航</nav>
    </div>
    <!-- 右侧：自适应 -->
    <div class="col">
      <main class="p-4">主内容</main>
    </div>
  </div>
</div>

col-auto：宽度靠你自己写；
col：把剩余空间全吃掉。
侧边栏布局，五分钟收工。

6. 避坑指南：掉坑3小时的，都是这几条

1. row套row→水平滚动条突然冒出
   解决：再套一层container或给父级加px-0。

2. col不写数量→默认col平分，但换行逻辑鬼畜
   解决：想要“换行”请用row-cols-*，例：

   <div class="row row-cols-2 row-cols-md-4 g-3">

3. 自己加margin把列撑坏→栅格断行
   解决：用栅格内g-*控制间距，别手抖写mx-2。

7. 今日作业：用栅格拼个“黄金首屏”

需求：

• 大屏：左6右6，左边标题右边图
• 平板：上下堆叠
• 手机：图在上，标题在下

参考答案（先别偷看）：

<div class="container py-5">
  <div class="row align-items-center gx-5">
    <!-- 文字 -->
    <div class="col-lg-6 order-lg-1 order-2">
      <h1>黄金标题</h1>
      <p>黄金副标题，越读越有钱。</p>
    </div>
    <!-- 图片 -->
    <div class="col-lg-6 order-lg-2 order-1">
      <img src="hero.png" class="img-fluid" alt="">
    </div>
  </div>
</div>

关键：

• order-*控制视觉顺序，手机先上图后文字。
• gx-5让左右留白有呼吸感。
  做完截图发群，让同事怀疑你偷偷开了“响应式外挂”。

下集预告