实施 Bootstrap 使字体大小缩小

Question

我最初为网络制作了一个 CSS 文件，但现在我想在开发过程中实现 Bootstrap，我将 Bootstrap CDN 添加到 HTML 文件。但它似乎正在缩小我的 font-size 整个事情。

之前

之后

如果不使用 !important 到 CSS 中每个 class 的 font-size，我应该怎么做才能恢复到原来的状态？

Answer 1

您在 css 文件导入后是否导入了 bootstrap link？如果是，则首先导入 bs 然后导入您的自定义 css.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">

bcz 我猜 bs 打字错误 class 正在覆盖您的自定义 css class.

Answer 2

In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes.

有关 Bootstrap 的大小调整引擎的更多信息，我建议阅读 following article。

What should I do to make it back to what it was without using !important to the font-size of every class in the CSS?

要覆盖它，您可以尝试以下操作：

html {
  font-size: 20px !important;
}

Answer 3

您可以在 CSS 中添加额外的 font-size，但确保在 Bootstrap CSS.[=11= 之后加载您的自定义 CSS 文件]

如果您愿意，可以使用更高的百分比，但低于 100% 会使字体更小。

body{
font-size: 110%;
}

Implementing Bootstrap makes the font size scaled down