正如标题所说,在使用 create-react-app
之后,我按照 Bootstrap 和 React-Bootstrap 文档的安装步骤进行操作。 :
npm install --save react-bootstrap bootstrap@4.0.0-alpha.6
然后在 index.html 中包含一个 Bootstrap CDN 的链接以防万一:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
这是我的 react 应用程序的开头,它没有正确应用样式:
MyNavbar.jsx:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
class MyNavbar extends Component {
render() {
return(
<div>
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#"> grood </a>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={2} href="#"> For Eateries </NavItem>
</Nav>
</Navbar>
</div>
)
}
}
export default MyNavbar;
应用程序.js:
import React, { Component } from 'react';
import MyNavbar from './MyNavbar.jsx'
import 'bootstrap/dist/css/bootstrap.css';
class App extends Component {
render() {
return (
<div className="App">
<MyNavbar />
</div>
);
}
}
export default App;
MyNavbar 和 App 都在同一个 src 文件中
最佳答案
react-bootstrap是为 Bootstrap 3 构建的 - 而不是 4。
将包 bootstrap 3 安装到您的元素中并从那里导入 css。
虽然有一个 React & Bootstrap 4 元素:reactstrap .
关于javascript - 无法将 Bootstrap 或 React-Bootstrap 样式应用于使用 create-react-app 创建的应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45145106/