Bootstrap 安装在 ReactJS 应用程序中，但没有样式答案

【问题标题】：Bootstrap installed in ReactJS app but no stylingBootstrap 安装在 ReactJS 应用程序中，但没有样式
【发布时间】：2020-03-06 09:21:17
【问题描述】：

我是 ReactJS 的新手

我创建了一个名为 footer 的子组件，还安装了 Bootstrap 包，但在页脚中没有收到任何样式。

代码 App.js --

import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Footer />
            </div>
        );
    }
}

export default App;

组件文件夹下的Footer.js

import React from 'react';

const Footer = () => {

    return (
        <footer className="page-footer font-small blue">
            <div className="footer-copyright text-center py-3">© 2019 Copyright:
                <a href="http://www.google.co.uk/">Test.com</a>
            </div>
        </footer>
    );
};

export default Footer;

index.js --

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();

但页脚中没有样式。

非常感谢任何帮助。

【问题讨论】：

我认为引导程序中没有footer 标签的预定义样式。您需要手动定义样式。
任何沙盒示例？
@ravibagul91 可能是这样。我需要在 App.css 中添加新样式

标签： javascript css node.js reactjs react-bootstrap

【解决方案1】：

好吧，问题是您没有正确导入引导程序，您的控制台中是否有导入错误？

import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

尝试通过上面写的我之一导入。

【讨论】：

【解决方案2】：

在你的 app.css 中像这样导入 bootstrap.css

import 'bootstrap/dist/css/bootstrap.css';

然后重启你的服务器

【讨论】：

【解决方案3】：

这仅仅意味着你没有正确导入引导程序，我不知道你的代码是如何结构的，所以我建议你使用下面的 cdn 版本并将其链接到你的 index.html 文件中。

<link

rel="样式表" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 完整性="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="匿名" />

这意味着您每次使用它时都必须在线。我建议的另一个选择是您使用 reactstrap，这对初学者来说会更容易。使用 npm install --save reactstrap 安装，然后你可以使用它任何你想要的组件。您可以在 Google 文档中搜索更多详细信息。

【讨论】：