Bootstrap 布局容器

上一篇讲了栅格原理,这一章我们深入布局三件套的细节:container 的几种变体、row 的列间距(gutter)、行与列的对齐控制。这些是写"看起来专业"的页面的关键。

1. container 的三种变体

container 是最外层容器,Bootstrap 提供了三种:

<!-- 1. container-fluid:永远占满视口宽度,无 max-width 限制 -->
<div class="container-fluid bg-primary text-white py-3">
  全宽容器(适合全屏 banner)
</div>

<!-- 2. container:响应式固定宽度,有 max-width,自动居中 -->
<div class="container bg-light py-3">
  默认 container(适合绝大多数页面)
</div>

<!-- 3. container-{sm|md|lg|xl|xxl}:100% 宽直到该断点,然后变固定宽 -->
<div class="container-md bg-info py-3">
  md 及以下全宽,md 以上变固定
</div>

三者的核心差别:

2. container 在各断点的实际宽度

这是面试常考、新手容易懵的点。container 在不同屏幕宽度下有不同的 max-width,Bootstrap 自动切换:

<!-- container 在各断点的实际 max-width:
     xs(<576px)     → 100% 全宽
     sm(≥576px)     → max-width: 540px
     md(≥768px)     → max-width: 720px
     lg(≥992px)     → max-width: 960px
     xl(≥1200px)    → max-width: 1140px
     xxl(≥1400px)   → max-width: 1320px
-->

这条规则的好处:在手机上 container 占满屏幕(避免左右留白浪费空间),在桌面上居中且限制最大宽度(避免内容拉得太宽难阅读)。Bootstrap 的"移动优先"在这里体现得淋漓尽致。

3. row 的列间距:gutter

gutter 是 row 控制内部 col 之间间距的工具。Bootstrap 4 用 no-gutters,5.0 重构为 g-*(更灵活,还分水平和垂直):

<!-- g-0:取消列间距(让 col 紧贴,常用于图片网格) -->
<div class="row g-0">
  <div class="col-6"><img src="a.jpg" class="w-100" /></div>
  <div class="col-6"><img src="b.jpg" class="w-100" /></div>
</div>

<!-- g-2 / g-3 / g-4 / g-5:间距依次变大(默认 g-3 是 24px) -->
<div class="row g-4">
  <div class="col-4"><div class="p-3 bg-light">A</div></div>
  <div class="col-4"><div class="p-3 bg-light">B</div></div>
  <div class="col-4"><div class="p-3 bg-light">C</div></div>
</div>

<!-- gx-* / gy-*:分别只控制水平 / 垂直间距 -->
<div class="row gx-5 gy-2">
  <div class="col-6">水平间距大,垂直小</div>
  <div class="col-6">水平间距大,垂直小</div>
</div>

gutter 是 Bootstrap 5 最重要的改进之一——以前要写自定义 padding 才能调间距,现在一个 class 搞定。

4. 行级垂直对齐:align-items

当一行内不同 col 高度不一致时(比如一个有图一个没图),怎么对齐?用 row 的 align-items-*:

<!-- 行级对齐:整行所有列的垂直对齐方式 -->
<div class="row align-items-start">
  <div class="col">顶部对齐</div>
  <div class="col">顶部对齐</div>
</div>

<div class="row align-items-center">
  <div class="col">垂直居中</div>
  <div class="col">垂直居中</div>
</div>

<div class="row align-items-end">
  <div class="col">底部对齐</div>
  <div class="col">底部对齐</div>
</div>

<!-- 单列独立对齐 -->
<div class="row align-items-center" style="height: 200px;">
  <div class="col align-self-start">我自己顶部</div>
  <div class="col">整行居中</div>
  <div class="col align-self-end">我自己底部</div>
</div>

注意:要让 align-items 生效,row 必须有明确的高度——要么内容自然撑开,要么你显式设 height。否则"垂直居中"没有参照系。

5. 水平分布:justify-content

row 内部 col 总宽不足 12 时,会有剩余空间。justify-content-* 决定剩余空间怎么分布:

<!-- 水平分布:row 的 justify-content 工具类 -->
<div class="row justify-content-start">
  <div class="col-3">靠左</div>
</div>

<div class="row justify-content-center">
  <div class="col-3">居中</div>
</div>

<div class="row justify-content-end">
  <div class="col-3">靠右</div>
</div>

<div class="row justify-content-between">
  <div class="col-3">左</div>
  <div class="col-3">右</div>
</div>

<div class="row justify-content-around">
  <div class="col-3">A</div>
  <div class="col-3">B</div>
</div>

<div class="row justify-content-evenly">
  <div class="col-3">A</div>
  <div class="col-3">B</div>
</div>

6. col 内部的内容对齐

上面讲的是 col 之间的对齐。如果你想让 col 内部的内容(比如图标和文字)对齐,需要用 d-flex 把 col 变成 flex 容器:

<!-- col 自己的内容对齐(用 d-flex + align-items) -->
<div class="col d-flex align-items-center">
  <img src="icon.png" height="20" />
  <span class="ms-2">图标与文字垂直居中</span>
</div>

<!-- 文本对齐:text-start/center/end -->
<div class="col text-center">
  这段文字水平居中
</div>

这是新手最容易卡住的点:col 默认是 block,内部内容是上下堆叠的。要水平排列内容,必须加 d-flex。这是 Bootstrap 把 Flexbox 工具类暴露出来的核心用法。

7. 一个综合示例

把上面的容器、间距、对齐组合起来,做一个典型的"卡片网格"布局:

这种结构在落地页、产品特性介绍、博客列表里随处可见。熟练后写一遍只要两分钟。

小结

布局容器的要点:

下一篇我们正式开始学组件——从最常用的按钮开始。

← 上一篇 栅格系统

下一篇 按钮组件 →

✈️💬