引导字体在反应中有所不同答案

【问题标题】：Bootstrap font is different in react引导字体在反应中有所不同
【发布时间】：2019-02-24 08:41:37
【问题描述】：

我想使用引导程序制作登录页面并做出反应。我使用来自官方页面的以下style。我在 index.html 文件中添加了这些所有引导程序和 css 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <link href="all.css" rel="stylesheet">
    <link href="autorization.css" rel="stylesheet">
    <link href="bootstrap.min.css" rel="stylesheet">

    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="bootstrap.bundle.min.js"></script>
  <script src="jquery.min.js"></script>
</html>

但结果与我通过常规 html 页面打开时不同。字体不同。

应该是这样的：

这就是我所拥有的：

我不明白为什么，因为我没有更改 css 文件...

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案1】：

这可能是index.js 文件的问题。在那里你删除导入index.css 行。

删除index.js文件中的这一行。

import './index.css';

【讨论】：

【解决方案2】：

在引导程序从 BS 重写 CSS 样式规则或引导程序 CSS 文件未加载后，您可能会加载另一个 CSS 文件，请在控制台或浏览器中检查它首先应用了哪个文件的样式

【讨论】：

【解决方案3】：

你可以用重要的东西来支配；

示例：

font-family: 'Lilita One'!important;

【讨论】：