覆盖引导字体大小

Question

我正在使用Bootstrap v5.0.2，但我需要将字体大小重写为一些自定义值。

在我使用<a href="#" class="btn btn-outline-danger">Click</a>的html中，这给了我一些预定义的按钮大小。在我的主.css文件中有：

body{font-size: 22px;}
h1{font-size: 24px;}

我想将按钮字体大小与页面字体大小匹配。

重写按钮字体大小的最佳方法是什么？

Answer 1

我会在您的主css文件中添加一个类。例如

.pageButtonSize {  font-size: 22px !important; }

然后将类添加到按钮标记中。

<a href="#" class="btn btn-outline-danger pageButtonSize">Click</a>

Answer 2

如果希望应用于所有.btn的自定义大小，那么在BS之后加载的样式表中，通过设置CSS变量和.btn字体大小的值来覆盖正文字体大小，以使用该变量：

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<style>
  h1 {
    font-size: 24px;
  }
  
  body {
    --bs-body-font-size: 22px;
  }
  
  .btn {
    font-size: var(--bs-body-font-size);
  }
</style>
<h1>
  heading
</h1>
<p>
  paragraph
</p>
<button class="btn btn-primary">
  button
</button>

​

这将调整基于var(--bs-body-font-size)值的任何元素的字体大小。不需要使用!important，也不需要额外的类名(在每个.btn上)。

Answer 3

您可以创建自己的file.css，其中包含要覆盖的所有样式。

然后，在添加引导程序后，将此文件添加到项目中。

注意:要确保您的样式将被应用，请考虑添加！对每种样式都很重要，例如：

​

h1{
  font-size: 50px !important;
  }

​