Bootstrap 3.3.1 正在影响整个页面的字体

Question

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

<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>

Answer 1

在这种非常具体的情况下（与需要更多思考的更一般的 'how do I link a style sheet to just one element' 问题相反）如果我们查看正在使用的 CSS：

bootstrap 在正文中设置 font-family、font-size 等。如果您不喜欢这些，请在您自己的 css 中包含以下内容：

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

如果您担心警报看起来像 bootstrap 想要的样子，那么您可以将特定用途的字体大小和系列设置回 bootstrap css:

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

Bootstrap 3.3.1 正在影响整个页面的字体

Bootstrap 3.3.1 is impacting the font for complete page

css

twitter-bootstrap-3