Question

Bootstrap的全局默认字体大小为14px，行高为1.428。如何更改其默认全局设置？

我是否必须在所有多个条目中更改bootstrap.min.css？

Answer 1

有几种方法，但由于您只使用CSS版本而不是SASS或LESS版本，因此最好使用Bootstraps自己的自定义工具：

在此页面上自定义您想要的任何内容，然后您可以下载具有您自己的字体大小和您想要更改的任何其他内容的自定义构建。

不建议直接更改CSS文件（或者只是添加覆盖Bootstrap CSS的新CSS样式），因为其他Bootstrap样式的值是从基本字体大小派生的。例如：

您可以看到基本字体大小用于计算h1，h2，h3等的大小。如果您刚刚更改了CSS中的字体大小（或添加了您自己的覆盖字体大小），则所有其他值根据Bootstrap的设计，在计算中使用字体大小将不再是按比例准确的。

正如我所说，最好的办法就是使用自己的自定义工具。这正是它的用途。

如果您使用SASS或LESS，则在编译之前更改变量文件中的字体大小。

Answer 2

您可以添加style.css，在bootstrap.css之后导入此文件以覆盖此代码。

例如：

/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* style.css */
* {
   font-size: 16px;
   line-height: 2;
}

请勿直接更改bootstrap.css以更好地维护代码。

Answer 3

Bootstrap使用变量：

$font-size-base: 1rem; // Assumes the browser default, typically 16px

我不建议使用这个，但你可以。最佳做法是使用以下方法覆盖浏览器默认基本字体大小：

html {
  font-size: 14px;
}

然后，

Bootstrap将获取该值并通过rems使用它来设置各种事物的值。

Answer 4

从当前的v4文档中执行此操作的推荐方法是：

$font-size-base: 0.8rem;
$line-height-base: 1;

确保在bootstrap css include之上定义变量，它们将覆盖引导程序。

不需要任何其他内容，这是最干净的方式

中非常清楚地描述了它

Answer 5

在v4中更改SASS变量：

$font-size-base: 1rem !default;

Answer 6

添加！在您的CSS中很重要

jniLibs

Answer 7

从 Bootstrap 5 开始，您可以通过更改 $font-size-root 变量来设置默认字体大小。

$font-size-root: 16px;

Answer 8

我刚刚解决了这类问题。我试图将

font-size增加到h4大小。我不想使用h4标签。我在bootstrap.css之后添加了我的CSS，但它没有工作。最简单的方法是：在HTML文档中，键入

<p class="h4">

您无需在css表中添加任何内容。它工作正常问题是我希望h4和h5之间的大小？回答为什么？这是取悦观众的唯一方法吗？我更喜欢这种方法来篡改像bootstrap这样的标准文档。