跟随旧版Bootstrap教程操作出现响应式、样式异常问题求助

算力阿峰

2026-10-7

问题原因及修复方案

Bootstrap版本不兼容：2018年的课程基于Bootstrap 4开发，你当前引入的是Bootstrap 5，大量组件属性、工具类命名发生了变更，是导致响应式异常的核心原因：
- 导航栏的data-toggle、data-target属性在Bootstrap 5中需替换为data-bs-toggle、data-bs-target
- 导航栏右对齐类ml-auto在Bootstrap 5中需替换为ms-auto
自定义样式被覆盖：你将自定义CSS的引入顺序放在了Bootstrap CSS之前，Bootstrap的默认样式会覆盖你的自定义规则，需要调整顺序，把自定义CSS的引入代码放在Bootstrap CSS引入代码的下方。
字体未正确引入：你CSS中使用了Montserrat-Black、Montserrat-bold、Montserrat-light三种字体变体，但你引入的Google Fonts仅包含Montserrat的400斜体字重，缺少对应粗细的字体资源，同时存在重复引入Montserrat的问题：
- 调整Google Fonts的引入配置，补充Montserrat字体的300、700、900字重，删除重复的Montserrat引入语句
- CSS中字体写法调整为通过font-weight属性控制粗细，比如h1的字体规则改为：
```
h1{
  font-size:3.5rem; /* 原12rem字号过大，会导致页面严重溢出 */
  line-height:1.5;
  font-family:"Montserrat";
  font-weight: 900;
}
```
类名大小写不一致：CSS中定义的按钮类是.Download-button（首字母大写），HTML中按钮使用的类是download-button（首字母小写），大小写不匹配导致按钮样式未生效，统一两边的类名即可。