Bootstrap 做响应式网页，核心就三件事：viewport 设置对、用 .container 或 .container-fluid 包住内容、用 .row + .col-* 类控制列宽；缺一不可，否则响应式无法正常工作。
直接说结论：Bootstrap 做响应式网页，核心就三件事——viewport 设置对、.container 或 .container-fluid 包住内容、用 .row + .col-* 类控制列宽。其他都是锦上添花，没这三步，响应式根本跑不起来。
viewport meta 标签必须加，且不能写错
这是整个响应式的基础，漏掉或写错会导致页面在手机上缩成一团、文字小得看不清，或者横向滚动条死活甩不掉。
正确写法只有一种（Bootstrap 官方强制要求）：
<meta name="viewport" content="width=device-width, initial-scale=1">
常见错误包括：
-
user-scalable=no或maximum-scale=1—— 这会禁用双指缩放，违反 WCAG 可访问性规范，很多地区已属合规风险 -
width=1024这类固定值 —— 直接让响应式失效，设备尺寸一变就崩 - 把这行写在
<title></title>后面甚至里 —— 浏览器解析 HTML 时会先渲染再补 viewport，造成闪动或错位
容器（container）选错会导致栅格系统失效
.container 和 .container-fluid 看似只是“宽一点”“窄一点”，但实际影响整页布局逻辑：
-
.container：在sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）等断点下有预设最大宽度（如lg下是 992px），居中显示，适合内容型网站 -
.container-fluid：始终 100% 宽度，无最大限制，适合后台管理页、数据看板这类需要撑满屏幕的场景 - 漏写容器直接套
.row——.row的负外边距（margin-left: -15px）会溢出视口，导致水平滚动条出现
别用 <div class="row"> 直接包 body —— 这不是 Bootstrap 的用法，是初学者最常踩的坑。<h3>col-* 类命名规则决定断点行为，不是随便写数字就行</h3>
<p>比如 <code>.col-md-6 表示“在中屏及以上（≥768px）占 6 列”，但它在手机上默认是 12 列（即 100% 宽）。很多人以为写了 md 就只在中屏生效，其实不然。
关键规则：
- 未声明的断点继承上一级：没有写
.col-sm-12，但写了.col-md-6，那在sm屏下它会按xs规则（即自动 12 列）渲染 - 多个断点可共存：
.col-12 .col-sm-6 .col-lg-4表示：手机全宽 → 平板半宽 → 大屏 1/3 宽 -
xs断点在 Bootstrap 5 中已移除（不再有.col-xs-*），所有未指定断点的.col-*默认就是xs行为 - 列数总和超过 12 不会报错，但会自动换行 —— 这是合法行为，但容易被误认为“样式没生效”
JavaScript 组件不是必须开，但开了就得配好依赖
像 navbar 折叠菜单、carousel 轮播图这些交互组件，依赖 bootstrap.js（或 bootstrap.bundle.js）以及底层的 Popper 库。
典型翻车现场：
- 只引入了 CSS，没引 JS —— 折叠按钮点击没反应，控制台报
TypeError: bootstrap is not defined - 用了
bootstrap.min.js却没提前加载Popper—— 下拉菜单、Tooltip 直接白屏，控制台提示Popper is not defined - 在模块化环境（如 Vite / Webpack）里直接
import 'bootstrap'却忘了import 'bootstrap/dist/css/bootstrap.min.css'—— 样式全丢，只剩裸 DOM
最省心方案：用 bootstrap.bundle.min.js（内置 Popper），并确保它在所有自定义 JS 之前加载。
真正难的不是写对几个 class，而是理解「断点继承」和「容器-行-列」三层嵌套的约束关系。很多问题表面是样式错乱，根子其实是容器缺失或断点漏写 —— 这些地方不检查，光调 CSS 没用。
