Блог

Это мой первый пост о переполнении стека, поэтому заранее приношу свои извинения за любую путаницу в презентации.

Я новичок в react bootstrap и использую его, чтобы попытаться создать простую панель мониторинга с 4 карточками в центре. Я использовал Create React App с помощью npm и отредактировал шаблонный код. Когда я пытаюсь отобразить свое приложение, контейнер и его дочерние элементы имеют высоту всего 2 пикселя. Я пытался удалить стиль заголовка приложения, но это только меняет положение карточек. Мой App.js файл содержит функцию App(), записанную следующим образом:

 import './App.css';
import Card from './Card.js'
import { Container, Row, Col } from 'react-bootstrap'

function App() {
  return (
    <div>
      <div className='App-header'>
        <Container>
          <Row className='row'>
            <Col> <Card /> </Col>
            <Col> <Card /> </Col>
            <Col> <Card /> </Col>
            <Col> <Card /> </Col>
          </Row>
        </Container>
      </div>
    </div>
  );
}

export default App;
 

Мой класс App-header в моем файле App.css выглядит следующим образом:

 .App-header {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px   2vmin);
  color: #000000;
  max-width: 100%;
}
 

Мой Card.js файл использует код boiler plate из react bootstrap для простой карты:

 import { Card, Button } from 'react-bootstrap'


<Card style={ {width: '18rem'} }>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>



export default Card
 

Вот как это выглядит, когда я пытаюсь его визуализировать:

Я пытаюсь заставить карты отображаться в середине контейнера и div, как они показаны на сайте react bootstrap. Еще раз спасибо!