React-Bootstrap Grid не применяется - PullRequest
Новая
       14

React-Bootstrap Grid не применяется

0 голосов
/ 07 ноября 2018

У меня проблемы с получением сетки (и строки) для работы в React-Bootstrap. Все остальные компоненты работают нормально, но я пытаюсь вывести мои элементы в ряд была боль Мой код:

РОДИТЕЛЬСКИЙ КОМПОНЕНТ 

        <Grid>
        <Row className="show-grid">
                {this.state.results.map((movie, index) => (
                    <EachResult key={index} id={index} movie={movie} results={this.state.results} index={index} userInfo={this.props.userInfo} />
                ))}
        </Row>
        </Grid>

Детский компонент 

    <Col>
    <h3>{props.movie.title}</h3>
    <Image src={url} width="125" height="220" thumbnail />
    <p><strong>Summary: </strong>{props.movie.overview}</p>
    <p><strong>Rating: </strong>{props.movie.vote_average}</p>
    <Button id={props.index} onClick={addGame}>Add</Button>
    </Col>

Я установил React-bootstrap и импортирую каждый компонент следующим образом: 

import { Grid, Row } from "react-bootstrap";

и 

import {Button, Image, Col} from "react-bootstrap"

Извините за грязный код! Любая помощь будет принята с благодарностью

РЕДАКТИРОВАТЬ: я импортирую таблицу стилей в мой Index.html!

1 Ответ

0 голосов
/ 07 ноября 2018

Попробуйте добавить параметр размера Col, например. 

 <Grid>
    <Row className="show-grid">
      <Col md={3}>
        ...
      </Col>
    </Row>
  </Grid>

VID офисный документ

Проверьте вывод DOM в браузере, в большинстве браузеров F12, в хроме отметьте конкретный элемент с помощью Ctrl+Shift+C. Надеюсь, это поможет

...