Bootstrap 3.3.1 正在影响整个页面的字体 [重复]答案

【问题标题】：Bootstrap 3.3.1 is impacting the font for complete page [duplicate]Bootstrap 3.3.1 正在影响整个页面的字体 [重复]
【发布时间】：2020-10-20 00:09:52
【问题描述】：

我正在尝试为一个特定的 div 元素添加引导程序以显示警报消息，但它会影响所有其他页面元素的字体并且字体看起来更小。如何让页面中只有一个 div 的引导调用？

<div class="bootstrap-test">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<i class="glyphicon glyphicon-warning-sign"></i>This is a warning alert.
</div>
</div>

【问题讨论】：

见google.com/…。
什么 isherwood 是重复的问题，您应该首先将所有链接设置为 style 标签而不是 div。
一开始你为什么认为它会起作用？
此问题已关闭，但它指向的已作为答案的链接已过时，并推荐了一个无法通过 W3 验证器测试的解决方案。我们如何重新提出这个问题？

标签： css twitter-bootstrap-3

【解决方案1】：

在这个非常具体的情况下（与需要更多思考的更一般的“我如何将样式表链接到一个元素”问题相反），如果我们查看正在使用的 CSS：

bootstrap 在正文中设置字体系列、字体大小等。如果您不喜欢这些内容，请在您自己的 CSS 中包含以下内容：

body{
  font-family: Myspecialfont, Helvetica, sans-serif
  font-size: 16px; /* or whatever you want the font size to be in the default case */
}

如果您担心警报会看到引导程序希望它的外观，那么您可以将特定用途的字体大小和系列设置回引导程序 css 中的样子：

.alert-warning {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
}

【讨论】：