我刚刚开始一个新的react应用,并想要实现react-bootstrap(通过运行npm install react-bootstrap bootstrap来实现) 列,行和按钮标记不起作用,并且node-modules文件夹中存在react-bootstrap文件夹。
import React from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import {Button, Col} from 'react-bootstrap';
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return(
<Container fluid>
<Row>
<Col>
hi
</Col>
<Col>
bye
</Col>
</Row>
<Button variant='primary'>hi</Button>
</Container>
)
}
}
export default App;
答案 0 :(得分:1)
您需要导入引导程序。
添加以下内容以导入引导程序。根据您的文件夹结构,相对路径可能不同。
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
然后,引导程序将可用于您的App组件及其所有子组件。
import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { Button, Col } from "react-bootstrap";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
class App extends React.Component {
render() {
return (
<Container fluid>
<Row>
<Col>hi</Col>
<Col>bye</Col>
</Row>
<Button variant="primary">hi</Button>
</Container>
);
}
}
export default App;
另一种选择是在您的index.js中导入引导,它将对所有组件可用。
import React from "react";
import ReactDOM from "react-dom";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);