时间戳

首页 > 解决方案 > Bootstrap 3.3.1 正在影响整个页面的字体

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

标签： csstwitter-bootstrap-3

解决方案

在这个非常具体的情况下（与更一般的“如何将样式表链接到一个元素”问题相反，需要更多思考）如果我们查看使用的 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;
}

推荐阅读