Почему мой контент не отображается в сетках? (React. js) - PullRequest
Новая
       34

Почему мой контент не отображается в сетках? (React. js)

1 голос
/ 29 января 2020

Я следую Обучающему учебнику Хамзы Мирзы на YouTube , чтобы создать поисковое приложение mov ie, но мне кажется, что результаты mov ie не отображаются в столбце / сетках. (Вы заметите, что я использую другой API здесь, для другой цели поискового приложения.)

Компонент «Мои фильмы» выглядит следующим образом: 

import React from 'react';

// Don't need a state, so a stateless component!
// The "props" below is referring to "movies" in <Movies movies={this.state.movies}/> in App.js
const Movies = props => (
    <div className='container'>
        <div className='row'>
            {props.movies.map((movie) => {
            return (
                <div key={movie.id} className='col-md-4' style={{marginBottom:'2rem'}}>
                    <div className='recipes__box'>
                        <img 
                            src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} 
                            alt={movie.title}>
                        </img>
                        <div className='recipe__text'>
                            <h5 className='recipes__title'>{movie.title}</h5>
                            <p className='recipes__subtitle'>{movie.release_date}</p>
                            <p>Rating: {movie.vote_average}/10</p>
                        </div>
                        <button className='recipe_buttons'>Details</button>
                    </div>
                </div>
            );
            } )} 
        </div>
    </div>
);

export default Movies;

В настоящее время он выглядит следующим образом: это: enter image description here

Но я бы хотел, чтобы это выглядело (конечно, с разным содержанием): enter image description here

Я перепроверил между моим приложением рецептов и этим поисковым приложением mov ie, и я не смог найти принципиальной разницы (кроме того факта, что они, конечно, используют разные API). Неужели у меня Bootstrap / grid не работает? Мой пакет. json сообщает мне, что я успешно загрузил Bootstrap v.4.4.1, версию, которую я использовал в своем приложении для рецептов.

В любом случае, дайте мне знать, если мне нужно поделиться другим кодом в рамках моего проекта React. Заранее спасибо!

1 Ответ

1 голос
/ 29 января 2020

Добавьте 

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

к индексу. js, может помочь, если вы забыли

...