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

如何解决Bootstrap 3.3.1正在影响整个页面的字体

我正在尝试为一个特定的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> 

解决方法

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

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

{
  "scripts": {
    "start": "node ./dev/server.js","format": "./node_modules/.bin/prettier --write --no-semi --tab-width 4 --single-quote \"{,!(node_modules|deps)/**/}*.js\""
  },"name": "react-drive-cms","version": "3.0.1","main": "app/app.js","directories": {
    "doc": "docs"
  },"author": "","license": "ISC","description": "","dependencies": {
    "axios": "^0.20.0"
  },"devDependencies": {
    "prettier": "^2.0.5","snowpack": "^2.14.3"
  }
}

如果您担心警报不知道引导程序如何看待，则可以将特定用途的字体大小和字体设置回引导程序CSS中：

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