如何更改或覆盖 Bootstrap 4 模板中的基本字体大小？答案

【问题标题】：How to change or override base font size in a Bootstrap 4 template?如何更改或覆盖 Bootstrap 4 模板中的基本字体大小？
【发布时间】：2021-04-13 06:10:01
【问题描述】：

我使用 Thymeleaf HTML 页面模板和 Bootstrap 4 创建了一个 Java/Spring Boot web 应用程序。我将页面模板基于名为“简单侧边栏”的免费 Bootstrap 4 站点模板：https://startbootstrap.com/template/simple-sidebar。到目前为止，这对我来说效果很好。

我想修改（或覆盖）“简单侧边栏”引导模板中提供的 CSS，以使整个模板的默认文本字体更小。我正在构建的应用程序供公司内部使用，只能在 PC 浏览器上查看。我需要它一次在屏幕上显示很多信息，所以字体大小是关键。

问题：

在 Bootstrap 4 模板中是否可以进行这种更改？
如果是这样，我是否需要修改模板附带的 CSS 文件，或者有没有办法用我添加到项目中的自定义 CSS 文件覆盖它们的 CSS 类？（如果可以避免的话，我宁愿不要修改 Bootstrap 模板附带的 CSS 文件）

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

我在这里找到了一个有用的教程：
https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design

他们推荐了一种方法，其中 font-size 根据显示页面的窗口/屏幕大小的类别被覆盖。我在自己的应用程序中尝试了这种方法，它为我提供了我想要的那种灵活性。

作为测试，我对一些常用的 HTML 元素类型使用了以下非常大的值。正如预期的那样，这些元素内的文本显示得非常大。

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  a {font-size:3.5rem;} /*1rem = 16px*/
  td {font-size:3.5rem;} /*1rem = 16px*/
  p {font-size:3.5rem;} /*1rem = 16px*/
  h1 {font-size:3.5rem;} /*1rem = 16px*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  a {font-size:5rem;} /*1rem = 16px*/
  td {font-size:5rem;} /*1rem = 16px*/
  p {font-size:5rem;} /*1rem = 16px*/
  h1 {font-size:5rem;} /*1rem = 16px*/
}

它也适用于像这样的非常小的值：

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  a {font-size:0.5rem;} /*1rem = 16px*/
  td {font-size:0.5rem;} /*1rem = 16px*/
  p {font-size:0.5rem;} /*1rem = 16px*/
  h1 {font-size:0.5rem;} /*1rem = 16px*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  a {font-size:0.75rem;} /*1rem = 16px*/
  td {font-size:0.75rem;} /*1rem = 16px*/
  p {font-size:0.75rem;} /*1rem = 16px*/
  h1 {font-size:0.75rem;} /*1rem = 16px*/
}

如果我缩小浏览器窗口，我喜欢在我的电脑上自动调整字体大小。当然，只有为各种窗口大小提供合理的值时，它才能正常工作。

我能够在不修改 Bootstrap 模板包中包含的任何文件的情况下完成这项工作。我将上面的示例 CSS 放入一个名为 my-custom-styles.css 的文件中，然后将该文件放入与 Bootstrap 模板附带的 simple-sidebar.css 文件相同的目录中。

最后，我的 HTML 模板需要在 <head> 块内：

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet"
        th:href="@{/vendor/bootstrap/css/bootstrap.min.css}"
        href="../../static/vendor/bootstrap/css/bootstrap.min.css" />
  <!-- Custom styles for this Boostrap template -->
  <link rel="stylesheet"
        th:href="@{/css/simple-sidebar.css}"
        href="../../static/css/simple-sidebar.css" />
  <!-- Custom styles for my application that override the Bootstrap template -->
  <link rel="stylesheet"
        th:href="@{/css/my-custom-styles.css}"
        href="../static/css/my-custom-styles.css" />

注意：th:href 属性由 Thymeleaf 模板库使用，不包含在发送到客户端浏览器的最终 HTML 中。

【讨论】：