logo标签列表

Bootstrap字体在React中不同。

cssreactjsbootstrap-4
3

我想使用Bootstrap和React制作登录页面。 我使用了官方页面上的样式，并将所有Bootstrap和CSS文件添加到了index.html文件中：

<!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页面打开时不同，字体也不同。
应该是这样的： enter image description here 但是我得到的是这样的： enter image description here 我不明白为什么会这样，因为我没有改变css文件...
3个回答
3
这可能是与index.js文件有关的问题。您需要删除导入index.css的代码行。
请在index.js文件中删除此行代码。
import './index.css';
1

如果您在Bootstrap重写CSS样式规则之后加载了另一个CSS文件，或者Bootstrap CSS文件未加载，请在控制台或浏览器中检查哪个样式来自哪个文件，以及哪个样式是首先应用的。

0

你可以通过!important来掌控；

例如：

font-family: 'Lilita One'!important;

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接