我使用Thymelaf HTML页面模板和Bootstrap 4创建了一个Java/Spring Boot Web应用程序。我基于一个名为"简单边栏"的免费Bootstrap 4网站模板的页面模板：https://startbootstrap.com/template/simple-sidebar.到目前为止，这对我来说效果很好。
我想修改(或覆盖("简单边栏"引导模板中提供的CSS，使整个模板的默认文本字体大小更小。我正在构建的应用程序是供公司内部使用的，只能在PC浏览器上查看。我需要它一次在屏幕上显示大量信息，所以字体大小是关键。
问题：
- 在Bootstrap 4模板中这种更改可能吗
- 如果是，我需要修改模板附带的CSS文件吗？或者有没有办法用我添加到项目中的自定义CSS文件覆盖它们的CSS类？(如果可以避免的话，我宁愿不修改Bootstrap模板附带的CSS文件(
我在这里找到了一个有用的教程：
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属性由Thymelaf模板库使用，不包括在发送到客户端浏览器的最终HTML中。