javascript - 为什么 react-bootstrap 没有向我的网格布局添加样式

Question

我正在制作 promodoro 时钟。我使用 react-bootstrap 编写了我的代码。它正在工作，但是引导程序的默认类的样式没有被添加到样式中。它只是相互堆叠。

import React, { Component } from "react";

import "./App.css";
import Grid from "react-bootstrap/lib/Grid";
import Row from "react-bootstrap/lib/Row";
import Col from "react-bootstrap/lib/Col";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Grid className="main-container">
          <h1>Promodoro Clock</h1>

          <Row className="time-setters ">
            <Col className="Session-time text-center" sm={6}>
              <div>Session time</div>
              <a href="#">+</a>
              <span>25</span>
              <a href="#">-</a>
            </Col>
            <Col className="Break-time text-center" sm={6}>
              <div>Break time</div>
              <a href="#">+</a>
              <span>5</span>
              <a href="#">-</a>
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

.App {
    text-align: center;
}



html {
    height: 100%;
}

body {
    height: 100%;
}

.main-container {
    max-width: 800px;
    margin: 0 auto;
}

标签： javascriptreactjsbootstrap-4react-bootstrap

Answer 1

因为您没有导入 css 文件：

import 'bootstrap/dist/css/bootstrap.min.css'

之前安装引导程序npm install bootstrap --save