如何在React中显示三个相邻的引导卡

Question

对于涉及Java和React的个人项目，我试图在引导卡中显示电影数据。我的问题是卡片是垂直呈现的。我想要实现的是让他们水平渲染成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;

编辑:

谢谢大家的帮助。

我设法通过删除引导来修复它。容器和引导。行frommovieccard .js并添加Bootstrap。行到MovieCardList.js

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>
)
}

Answer 1

在您的MovieCardList中添加display: flex的内联样式。

function MovieCardList(props) {
return (
<div style="display: flex">
{props.movies.map((movie) => (
<MovieCard key={movie.id} movies={movie}></MovieCard>
))}
</div>
);
}
export default MovieCardList;

或display: grid; grid-template-columns: repeat(3, fr);

function MovieCardList(props) {
return (
<div style="display: grid; grid-template-columns: repeat(3, fr);">
{props.movies.map((movie) => (
<MovieCard key={movie.id} movies={movie}></MovieCard>
))}
</div>
);
}
export default MovieCardList;

Answer 2

像这样在MovieCardList中添加className="container"，应该可以工作。

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

.container {
display: flex;
flex-direction: row
}