为什么我的内容没有显示在网格中？ （React.js）

Question

我正在按照Hamza Mirza's React tutorial on YouTube来构建电影搜索应用程序，但是我似乎无法将电影结果显示在列/网格中。 （您会注意到，出于不同的搜索应用目的，我在这里使用了不同的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;

目前看起来像这样：

但是我希望它看起来像这样（当然，内容不同）：

我在我的食谱应用程序和此电影搜索应用程序之间进行了交叉检查，但我找不到任何根本区别（当然，除了他们使用不同的API的事实以外）。我的Bootstrap /网格无法正常工作吗？我的package.json告诉我我已经成功下载了Bootstrap v.4.4.1，这是我在食谱应用中使用的版本。

无论如何，请告诉我是否需要在我的React项目中共享其他代码。预先感谢！

Answer 1

添加

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

对于index.js，如果您忘记了，可能会有所帮助