[英]Bootstrap installed in ReactJS app but no styling
我是 ReactJS 的新手
我创建了一个名为 footer 的子组件,还安装了 Bootstrap package 但在页脚中没有收到任何样式。
代码 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();
但是页脚中没有样式。
非常感谢任何帮助。
你的代码看起来不错。 停止正在运行的代码并重新启动它会工作。 第一次安装引导程序需要从头开始重新渲染。
好吧,问题是您没有正确导入引导程序,您的控制台中是否有导入错误?
import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
尝试通过上面写的我之一导入。
在你的 app.css 导入 bootstrap.css 像这样
import 'bootstrap/dist/css/bootstrap.css';
然后重启你的服务器
这仅仅意味着您没有正确导入引导程序,我不知道您的代码是如何结构的,所以我建议您使用下面的 cdn 版本并将其链接到您的 index.html 文件中。
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 完整性="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
这意味着您每次使用它时都必须在线。 我建议的另一个选择是您使用 reactstrap,这对初学者来说会更容易。 使用 npm install --save reactstrap 安装,然后您可以使用任何您想要的组件。 你谷歌文档以获取更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.