Bootstrap等CSS框架需满足前提条件才生效：必须声明DOCTYPE和viewport元标签，HTML结构要符合框架要求，class名须匹配对应版本，还需清理模板中高优先级的幽灵样式。
直接用 CSS 框架（比如 Bootstrap、Tailwind）套 HTML 模板，不是“加个 link 就完事”——没初始化、没删冗余、没适配语义结构，页面照样错位、响应失效、调试抓狂。
为什么 link 了 Bootstrap 还是不生效？
常见现象：引入了 CDN 的 bootstrap.min.css，但按钮没圆角、栅格不分行、navbar 堆成一坨。根本原因不是框架坏了，而是 HTML 没满足前提条件：
- 缺失
<meta name="viewport" content="width=device-width, initial-scale=1">—— 移动端样式直接被忽略 - 没写
<!DOCTYPE html>或写成<!doctype html>（大小写敏感，部分旧版 Bootstrap 会降级处理） - 手动写了
margin/padding重置，和框架的默认间距规则冲突（比如 Bootstrap 5 默认用rem，你用px强制覆盖） - HTML 标签没按框架文档要求嵌套，例如把
<div class="row">直接塞进<body>，中间缺了container或container-fluid
class 名不是随便抄的：看文档查版本差异
同一个功能，Bootstrap 4 和 5 的 class 名可能完全不同，Tailwind 更是靠组合生成类名。抄错版本=白忙活：
- 居中文字：
text-center（Bootstrap 4/5）✅，但text-xs-center（仅 Bootstrap 4）❌ - 隐藏元素：
d-none（Bootstrap 5）✅，hidden（Bootstrap 4）✅，但 Tailwind 是hidden或invisible（语义不同） - Tailwind 中
bg-blue-500有效，但bg-blue无效；而 Bootstrap 的bg-primary依赖主题色配置，未初始化时可能只是灰色 - 用 Flex 布局时，Bootstrap 的
d-flex justify-content-center align-items-center是固定组合；Tailwind 的flex items-center justify-center才对，顺序不影响，但漏一个就失效
模板里删不干净的“幽灵样式”怎么清？
很多免费 HTML 模板自带内联 style 或自定义 CSS 文件，优先级高于框架，导致 class 看似写了却没反应：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 检查元素 computed styles，看
color、display等属性是否被或style.css覆盖（浏览器 DevTools 的 Styles 面板里带inline或文件名的就是源头） - 临时注释掉模板里的
<style>块和所有<link rel="stylesheet" href="xxx.css">，只留框架 CSS，确认效果正常后再逐个放开排查 - 遇到
!important硬覆盖？别硬刚——改用更具体的选择器，比如把.btn改成body .btn，或直接在框架源码里删掉那行!important（不推荐长期维护） - 注意某些模板用
id写样式（如#header { margin: 0 }），ID 选择器优先级远高于 class，必须显式用!important或改用 ID + class 组合才能覆盖
响应式断点没触发？检查容器包装层级
Tailwind 的 md:flex、Bootstrap 的 col-md-6 不起作用，大概率是父容器没撑开或脱离文档流：
- 确保响应式 class 所在元素的父级有明确宽度（比如 Bootstrap 的
container或container-fluid），否则断点计算失去基准 - 避免在 flex 容器里再套浮动（
float: left），二者逻辑冲突，尤其在旧版 Bootstrap 中会导致子项塌陷 - Tailwind 的
sm:/md:前缀依赖viewport元标签，且设备宽度必须严格落在断点区间内（如md:对应 ≥768px），用 Chrome 模拟器调到 767px 就会退回到默认样式，不是 bug - 用
display: none隐藏的元素，在响应式切换时不会自动重绘尺寸，需配合visibility: hidden+height: 0或 JS 强制 reflow
真正卡住人的从来不是“怎么写 class”，而是框架和模板之间那些没声明的契约：doctype 是否规范、viewport 是否到位、容器是否闭环、自定义样式是否静默覆盖。动手前花两分钟扫一遍框架文档的 “Getting Started” 小节，比调三小时更省时间。
