如何为Bootstrap的$display-font-sizes列表添加更多尺寸？

API 探路者

2026-6-13

自定义Bootstrap Display标题尺寸无效的问题

我想要使用更小尺寸的Bootstrap显示字体，于是尝试扩展预定义的display-1至display-6（对应5rem至2.5rem）尺寸。按照Bootstrap官网说明，我在代码中修改了$display-font-sizes Sass映射，添加了7到10号尺寸：

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem,
  7: 2rem, //I added 7 through 10
  8: 1.5rem,
  9: 1rem,
  10: 0.5rem,
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

但修改后，带有display-10、display-9类的h1并未显示预期的小尺寸，反而和display-5的大小一致，还发现display-5和display-6看起来完全相同。我疑惑为何官网称显示标题可通过$display-font-sizes等配置，但实际未生效，是否需要修改Bootstrap源码？

以下是我使用的Bootstrap引入代码：

<head>
<!-- RWD tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Title</title>
<!-- Stylesheet link tags -->
<link rel="stylesheet" type="text/CSS" href="Personal.css">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> <!-- Material symbols are just an extra thing I've added in case I need them -->
  
   </head>
<body>

   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

我使用Skill Struck（学校平台）进行代码编写。

解决方案

核心问题

你直接引入了编译好的Bootstrap CDN CSS文件，而修改Sass变量的前提是要基于Bootstrap的Sass源码重新编译生成自定义CSS。你当前写的Sass变量和CDN的成品CSS没有任何关联，所以变量不会生效，自定义的display-7到display-10类根本不会生成，浏览器只能 fallback 到已有样式，导致尺寸显示异常。

两种解决方式

方式1：直接在自定义CSS中手动添加类（适合快速测试，无需Sass编译）

在你的Personal.css里直接写这些新增的display类样式，不用依赖Sass：

.display-7 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.2;
}
.display-8 {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
}
.display-9 {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
}
.display-10 {
  font-size: 0.5rem;
  font-weight: 300;
  line-height: 1.2;
}

注意要确保Personal.css在Bootstrap CDN链接之后引入，这样自定义样式才能覆盖默认样式。

方式2：使用Sass编译自定义Bootstrap（适合长期自定义）

如果你想按官网的方式用变量配置，需要：

获取Bootstrap的Sass源码（通过npm安装bootstrap@4.3.1，或下载官网源码包）
创建自定义Sass文件，先定义要覆盖的变量（比如你的$display-font-sizes），再导入Bootstrap主文件：

// 自定义变量
$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem,
  7: 2rem,
  8: 1.5rem,
  9: 1rem,
  10: 0.5rem,
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;

// 导入Bootstrap主Sass文件
@import "bootstrap";

编译这个Sass文件生成CSS，然后在HTML中引入编译后的CSS，替换掉原来的Bootstrap CDN链接。

额外说明

不需要修改Bootstrap源码，只需要在编译前覆盖变量即可。你用的Bootstrap 4.3.1默认只生成display-1到display-6的类，新增的7-10必须通过上述两种方式之一才能生成对应的样式。

内容的提问来源于stack exchange，提问作者max.html

如何为Bootstrap的$display-font-sizes列表添加更多尺寸？

解决方案 #

核心问题 #

两种解决方式 #