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

Answer 1

因为您没有导入css文件：

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

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

Answer 2

如果您要一次导入多个内容，则可能需要使用以下内容：

import { Grid, Row, Col } from 'react-bootstrap';

此外，请确保将样式表导入页面上的某处，如文档中所述：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

2 个答案: