覆盖 bootstrap 字体大小

Question

我正在使用 Bootstrap v5.0.2，但我需要将字体大小覆盖为某个自定义值。

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

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

覆盖按钮字体大小的最佳方法是什么？

Answer 1

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

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

然后将 class 添加到您的按钮标记中。

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

Answer 2

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

然后，在添加bootstrap后将此文件添加到您的项目中

注意：为确保应用您的样式，请考虑为每种样式添加 !important，例如：

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

Answer 3

如果您希望将自定义大小应用于所有 .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，也不需要额外的class名称（在每个.btn上）。

覆盖 bootstrap 字体大小

Override bootstrap font size

css

font-size

twitter-bootstrap