React中如何实现三张Bootstrap卡片横向并排显示？

我正在开发一个结合Java后端与React前端的个人项目，需要用Bootstrap卡片展示电影数据，但目前卡片是垂直排列的，希望实现每行3张的横向布局。尝试过设置display: inline-block等样式，都没有效果。

初始代码 #

Moviespage.js #

function Moviespage() {
  const [title, setTitle] = useState("");
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    loadMovies();
  }, []);

  const loadMovies = () => {
    MovieAPI.getMovies()
      .then((res) => {
        setMovies(res.data.movies);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const getMoviesByTitle = (title) => {
    MovieAPI.getMoviesByTitle(`${title}`)
      .then((res) => {
        setMovies(res.data.movies);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const handleSearchChange = (event) => {
    event.preventDefault();
    setTitle(event.target.value);
    getMoviesByTitle(title);
  };

  return (
    <div>
      <Bootstrap.Container>
        <Bootstrap.Form.Control
          style={{ margin: "1% 0 0 0" }}
          type="text"
          placeholder="Search"
          value={title}
          onChange={handleSearchChange}
        />
      </Bootstrap.Container>
      <MovieCardList movies={movies} />
    </div>
  );
}

export default Moviespage;

MovieCardList.js #

function MovieCardList(props) {
  return (
    <div>
      {props.movies.map((movie) => (
        <MovieCard key={movie.id} movies={movie}></MovieCard>
      ))}
    </div>
  );
}

export default MovieCardList;

MovieCard.js #

function MovieCard(props) {
  return (
    <Bootstrap.Container>
      <Bootstrap.Row>
        <Bootstrap.Col className="col-sm-4">
          <Bootstrap.Card
            className="card-style"
            style={{ margin: "3% 0 0 0" }}
            key={props.movies.id}
          >
            <Bootstrap.Card.Body>
              <Bootstrap.Image src={props.movies.thumbnail} width="100%" />
              <Bootstrap.Card.Title>{props.movies.title}</Bootstrap.Card.Title>
              <Bootstrap.Card.Text>
                {props.movies.releaseYear}
              </Bootstrap.Card.Text>
              <Bootstrap.Card.Text>{props.movies.rating}</Bootstrap.Card.Text>
              <Bootstrap.Card.Text>{props.movies.genre}</Bootstrap.Card.Text>
            </Bootstrap.Card.Body>
          </Bootstrap.Card>
        </Bootstrap.Col>
      </Bootstrap.Row>
    </Bootstrap.Container>
  );
}

export default MovieCard;

问题解决 #

已经解决卡片布局问题，方法是移除MovieCard.js中的Bootstrap.Container和Bootstrap.Row组件，同时在MovieCardList.js中添加Bootstrap.Row组件统一控制行布局。

修改后的代码 #

MovieCard.js

return (
    <Bootstrap.Col className="col-sm-4">
        <Bootstrap.Card style={{ margin: "3% 0 0 0", borderColor:"#bbbbbb"}} key={props.movies.id}>
            <Bootstrap.Card.Body>
                <Bootstrap.Image src={props.movies.thumbnail} style={{ width: "100%", height: `calc(1.75 * 322px)`, }} />
                <Bootstrap.Card.Title>{props.movies.title}</Bootstrap.Card.Title>
                <Bootstrap.Card.Text>{props.movies.releaseYear}</Bootstrap.Card.Text>
                <Bootstrap.Card.Text>{props.movies.rating}</Bootstrap.Card.Text>
                <Bootstrap.Card.Text>{props.movies.genre}</Bootstrap.Card.Text>
                <Bootstrap.Card.Text>{props.movies.id}</Bootstrap.Card.Text>
                {
                    localStorage.getItem("user-info").includes('ADMIN') && (
                        <Bootstrap.Button style={{ backgroundColor: "red", borderColor: "gray" }}
                            onClick={handleSubmit}><RiDeleteBin5Fill style={{ backgroundColor: "red" }} /></Bootstrap.Button>
                    )
                }
            </Bootstrap.Card.Body>
        </Bootstrap.Card>
    </Bootstrap.Col>
)
}

MovieCardList.js

return (
    <div>
        <Bootstrap.Row>
            {
                props.movies.map(movie =>
                    <MovieCard key={movie.id} movies={movie}></MovieCard>
                )
            }
        </Bootstrap.Row>
    </div>
)
}

内容的提问来源于stack exchange，提问作者Funkops