[英]React-Bootstrap not working on components
我剛開始一個新的 react 應用程序並想實現 react-bootstrap(通過運行 npm install react-bootstrap bootstrap 來實現)Column、Row 和 Button 標簽不起作用,並且 react-bootstrap 文件夾存在於 node-modules 文件夾中.
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;
您需要導入引導程序。
添加以下內容以導入引導程序。 根據您的文件夾結構,相對路徑可能會有所不同。
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 中導入 bootstrap,它將對您的所有組件可用。
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
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.