Javascript React引导程序在组件上不工作

我刚刚启动了一个新的react应用程序，希望实现react引导（通过运行npm安装react引导引导实现） 列、行和按钮标记不起作用，并且节点模块文件夹中存在react引导文件夹

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;

从“React”导入React；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“react bootstrap”导入{Button，Col}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
你好
再见
你好
)
}
}
导出默认应用程序；

您需要导入引导

添加以下内容以导入引导。根据文件夹结构的不同，相对路径可能不同

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

然后引导将可用于您的应用程序组件及其所有子组件

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;

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
);

从“React”导入React；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“react bootstrap”导入{Button，Col}；
导入“./node_模块/bootstrap/dist/css/bootstrap.min.css”；
类应用程序扩展了React.Component{
render（）{
返回(
你好
再见
你好
);
}
}
导出默认应用程序；

另一个选项是在index.js中导入引导，它将可用于所有组件

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;

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
);

从“React”导入React；
从“react dom”导入react dom；
导入“./node_模块/bootstrap/dist/css/bootstrap.min.css”；
从“/App”导入应用程序；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

为了以防万一，我在windows 10上工作得非常好！谢谢