GitHub Pages与VS Code Live Server页面显示不一致问题求助

核心问题分析 #

你当前的代码未引入Bootstrap 5的样式文件，这是页面无法使用Bootstrap字体的根本原因；同时自定义CSS强制统一了所有文本的字体大小，破坏了Bootstrap默认的字体层级结构，加上GitHub Pages的缓存机制，最终导致本地与线上显示不一致。

具体修复步骤 #

1. 引入Bootstrap 5 CSS文件
   在HTML的<head>标签中，将Bootstrap的CDN链接放在自定义样式文件之前，确保Bootstrap基础样式（包括字体）优先加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tribute Page Steve Jobs</title>
    <!-- 引入Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
</head>
<!-- 其余HTML内容不变 -->

2. 调整自定义CSS的字体设置
   你当前的CSS强制将所有文本元素的字体大小设为1.5rem，完全覆盖了Bootstrap的字体层级。建议修改为：

body{background-color: black;}
#image{max-width: 100%;height: auto;display: block;}
/* 保留颜色设置，移除统一的font-size，让Bootstrap字体层级生效 */
h1,p,figcaption,h2,h4,li{color: white;}
/* 按需单独调整特定元素的字体大小，比如标题 */
#title {
    font-size: 2.8rem;
}
a{background-color: gray;color: white;}

或者直接使用Bootstrap内置的字体大小类（如fs-1、fs-2）添加到对应HTML标签上，比如：

<h1 id="title" class="fs-1">Steve Jobs</h1>

3. 处理GitHub Pages缓存
   上传修改后的代码后，若页面仍未更新，可按Ctrl+F5强制刷新浏览器清除缓存，或等待几分钟让GitHub Pages的CDN完成缓存更新。

内容的提问来源于stack exchange，提问作者mewni