Bootstrap 响应式断点
响应式是 Bootstrap 最核心的价值主张——一套代码同时适配手机、平板、桌面。本章带你彻底搞懂六个断点的含义,以及如何用 class 后缀实现"不同屏幕不同样式"。
1. 六个断点
Bootstrap 内置了六个屏幕宽度断点:
<!-- Bootstrap 默认六个断点:
xs < 576px 默认(无前缀),手机竖屏
sm ≥ 576px 手机横屏 / 大手机
md ≥ 768px 平板竖屏
lg ≥ 992px 平板横屏 / 小笔记本
xl ≥ 1200px 桌面
xxl ≥ 1400px 大屏桌面
每个断点都是"min-width"——向上生效。
这是"移动优先"的核心 -->关键理解:
- 断点是 min-width:
sm表示"≥576px 时生效",md表示"≥768px 时生效",依此类推。每个断点向上生效,向下不生效。 - xs 没有前缀:默认值就是 xs(手机),所以基础 class 不带前缀就代表"所有屏幕都生效"。
- 断点是覆盖关系:写
col-12 col-md-4表示"手机全宽,md 及以上占 4 列"——md 的规则覆盖了 xs 的默认值。
2. 栅格的响应式:col-{断点}-*
这是响应式最经典的用法——同一个元素在不同屏幕下占不同列数:
<!-- col-*:所有屏幕尺寸 -->
<div class="col-6">永远占一半</div>
<!-- col-sm-*:sm 及以上占 N 列(否则堆叠) -->
<div class="col-sm-6">手机全宽,sm 及以上占一半</div>
<!-- col-md-*:md 及以上占 N 列 -->
<div class="col-md-4">手机平板全宽,md 及以上占 1/3</div>
<!-- col-lg-*:lg 及以上占 N 列 -->
<div class="col-lg-3">小屏全宽,lg 及以上占 1/4</div>
<!-- 不同断点不同列数:手机 1 列,平板 2 列,桌面 3 列 -->
<div class="row">
<div class="col-12 col-sm-6 col-md-4">卡片 1</div>
<div class="col-12 col-sm-6 col-md-4">卡片 2</div>
<div class="col-12 col-sm-6 col-md-4">卡片 3</div>
</div>
<!-- 解释:
手机(xs):col-12,每行 1 个
平板(sm):col-sm-6,每行 2 个
桌面(md):col-md-4,每行 3 个
一个 class 跑通所有屏幕 -->理解这条规则后,几乎所有的"手机 1 列、平板 2 列、桌面 3 列"卡片网格都能用一行 class 解决:
col-12:手机默认全宽(因为 xs 没前缀)。col-sm-6:sm 及以上占 6 列(每行 2 个)。col-md-4:md 及以上占 4 列(每行 3 个)。
断点向上覆盖,所以最终在桌面端看到的是 col-md-4 的效果。这种"从基础到具体"的写法就是移动优先。
3. 显隐的响应式:d-*
不同设备显示不同内容——比如桌面端展示完整表格,手机端改成卡片列表:
<!-- d-*:不同屏幕下显示/隐藏 -->
<!-- 只在桌面显示,手机平板隐藏 -->
<div class="d-none d-lg-block">
<img src="wide-banner.jpg" alt="宽屏 banner" />
</div>
<!-- 只在手机平板显示,桌面隐藏 -->
<div class="d-lg-none">
<img src="mobile-banner.jpg" alt="手机 banner" />
</div>
<!-- 只在平板显示 -->
<div class="d-none d-md-block d-lg-none">平板专属内容</div>
<!-- 只在手机显示 -->
<div class="d-md-none">手机专属内容</div>关键模式:
- 桌面显示:
d-none d-lg-block(默认隐藏,lg 显示)。 - 手机显示:
d-lg-none(默认显示,lg 隐藏)。 - 仅平板显示:
d-none d-md-block d-lg-none(隐藏 → md 显示 → lg 又隐藏)。
记住口诀:"移动优先,加断点解锁,再加断点覆盖"。
4. 文本工具类的响应式
文本对齐、字号、字重都可以加断点后缀:
<!-- 文本对齐随屏幕变化 -->
<p class="text-start text-md-center text-lg-end">
手机左对齐,平板居中,桌面右对齐
</p>
<!-- 字号随屏幕变化 -->
<h1 class="fs-4 fs-md-2 fs-lg-1">从小变大的标题</h1>
<!-- 字重、颜色也可以响应式 -->
<p class="fw-normal fw-md-bold">手机细体,平板加粗</p>
<p class="text-muted text-md-dark">手机浅灰,平板深色</p>这种用法在做"手机紧凑、桌面舒展"的版式时特别有用——比如手机标题小一点省空间,桌面放大更醒目。
5. 间距的响应式
间距工具类同样支持断点后缀——在不同屏幕给不同的 padding / margin:
<!-- 间距响应式:不同屏幕不同 padding/margin -->
<!-- 手机小内边距,桌面大内边距 -->
<section class="p-2 p-md-4 p-lg-5">
内容
</section>
<!-- 手机紧凑(无下间距),桌面留白 -->
<div class="mb-0 mb-md-4">...</div>
<!-- 不同屏幕的栅格间距:g-{断点}-* -->
<div class="row g-2 g-md-4">
<div class="col-6">手机间距 8px,桌面 24px</div>
<div class="col-6">手机间距 8px,桌面 24px</div>
</div>p-2 p-md-4 p-lg-5:手机紧凑、平板适中、桌面宽松。g-2 g-md-4:栅格列间距也响应式。
这是提升移动端体验的关键——手机屏幕小,padding 也要按比例缩小,否则内容显得拥挤。
6. flex 响应式
flex 方向、对齐方式都能响应式:
<!-- flex 方向随屏幕变 -->
<!-- 手机垂直堆叠,桌面水平排列 -->
<div class="d-flex flex-column flex-md-row">
<div class="me-md-3 mb-2 mb-md-0">A</div>
<div>B</div>
</div>
<!-- 手机居中,桌面靠左 -->
<div class="d-flex justify-content-center justify-content-md-start">
<div>内容</div>
</div>
<!-- 解释:
flex-column 手机竖排,flex-md-row 平板起横排
me-md-3 横排时给右侧间距
mb-2 mb-md-0 手机有下间距,平板去掉(横排时不需要) -->这是后台界面、表单布局最常用的模式——手机端为了节省横向空间,通常用垂直堆叠(flex-column);桌面端横向排列(flex-md-row)。
7. 完整实战:响应式特性卡片
把上面所有技巧组合起来,做一个生产环境常用的"特性介绍"模块:
<!-- 完整实战:响应式特性卡片网格 -->
<div class="container py-5">
<h2 class="text-center mb-4 mb-md-5">我们的特性</h2>
<div class="row g-3 g-md-4 g-lg-5">
<!-- 每张卡片:手机 1 列,平板 2 列,桌面 3 列 -->
<div class="col-12 col-sm-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-body p-3 p-md-4">
<div class="text-primary mb-3">
<i class="bi bi-lightning-charge-fill fs-1"></i>
</div>
<h3 class="h5 fw-bold">极速</h3>
<p class="text-muted mb-0">毫秒级响应,丝般顺滑。</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-body p-3 p-md-4">
<div class="text-success mb-3">
<i class="bi bi-shield-check fs-1"></i>
</div>
<h3 class="h5 fw-bold">安全</h3>
<p class="text-muted mb-0">银行级加密,数据不丢失。</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card h-100 shadow-sm">
<div class="card-body p-3 p-md-4">
<div class="text-warning mb-3">
<i class="bi bi-stars fs-1"></i>
</div>
<h3 class="h5 fw-bold">优雅</h3>
<p class="text-muted mb-0">每个像素都精心打磨。</p>
</div>
</div>
</div>
</div>
</div>这个例子体现了响应式的所有精华:
- 栅格:col-12 col-sm-6 col-lg-4,一行 1 / 2 / 3 列。
- 间距:g-3 g-md-4 g-lg-5,越大屏幕间距越大。
- 内边距:card-body p-3 p-md-4,手机紧凑桌面宽松。
- 标题:mb-4 mb-md-5,桌面留白更多。
- 等高:h-100 让所有卡片对齐底部。
8. 调试响应式的技巧
- 用浏览器开发者工具:F12 → 切换设备工具栏(Ctrl+Shift+M),拖拽宽度看布局变化。
- 从最小屏开始写:先把 mobile 写好,再一层层加 md / lg 增强——这是移动优先的真谛。
- 断点不要写太多:三档(手机/平板/桌面)够用,过度细化维护成本高。
- 用 container 限宽:桌面端不限宽,内容会拉得很长难阅读。
9. 自定义断点
Bootstrap 默认的六个断点已经覆盖 99% 场景,但如果你真的需要自定义(比如增加一个超宽屏 xxl=1920px),可以通过 Sass 改 $grid-breakpoints 变量。改完后所有断点相关的工具类(包括 col-xxx-*、d-xxx-* 等)都会自动生成新版本——这是 Sass 比 CDN 引入的最大优势。
10. 移动优先的哲学
Bootstrap 的所有响应式设计都基于"移动优先":
- 基础 class 服务于最小屏(手机),向上扩展。
- 断点后缀是"增强"——大屏有更多功能,小屏有基本可用。
- 性能更好:手机往往网络慢、CPU 弱,只加载手机需要的样式最快。
- 符合实际用户分布:如今移动端流量已超过桌面,优先优化移动端是商业正确的选择。
系列总结
恭喜,Bootstrap 系列到这里就结束了。回顾一下我们学到的:
- 核心:栅格系统 + 布局容器(container / row / col)。
- 组件:按钮、卡片、警告、徽章、导航栏、表单。
- 工具类:spacing、flex、文本、显隐——万能瑞士军刀。
- 响应式:六个断点,移动优先,一套代码适配所有屏幕。
下一步建议:
- 把每篇的示例代码都在本地敲一遍,加深肌肉记忆。
- 用 Bootstrap 做一个完整的"产品落地页"或"个人博客首页"作为练手项目。
- 需要深度定制主题色时,学习 Sass 变量覆盖。
- 了解 Bootstrap 的 JavaScript 组件(modal、carousel、accordion)——下个进阶系列会讲。
Bootstrap 是"把常见 UI 难题打包解决"的典范,学会它,你做原型的速度会成倍提升。祝你写出漂亮的页面!
← 上一篇 工具类