我正在尝试并排对齐电影卡。 但他们在列中对齐

Question

这是我的电影列表组件。 我在 div 部分尝试了不同的属性来连续获取卡片。 但是所有的卡片都在一个列中对齐。我应该使用弹性还是网格。如果是，我该如何使用它们。 即使我为此参考了很多资源。但对我没有用。 我应该怎么做才能如愿以偿。 请帮助我。

import React, { useState } from 'react'
import { useSelector } from 'react-redux'
import MovieCard from './MovieCard'

const MoviesList = (props) => {
    const [search, setSearch] = useState('')
    const [filterBy, setFilterBy] = useState([])
    const [orderBy, setOrderBy] = useState('')

    const movies = useSelector((state) => {
        console.log(state.movies)
        return state.movies
    })

    const handleChange = (e) => {
        const inputValue = e.target.value
        setSearch(inputValue)

        const filteredValue = movies.filter((movie) => {
            return movie.Title.toLowerCase().includes(inputValue)
        })
        setFilterBy(filteredValue)

        console.log(filteredValue)

    }

    const handleSelectChange = (e) => {
        setOrderBy(e.target.value)
    }

    const show = (movies) => {
        switch (orderBy) {
            case 'a-z': return [...movies.sort((a, b) => a.Title.localeCompare(b.Title))]
            case 'z-a': return [...movies.sort((a, b) => b.Title.localeCompare(a.Title))]
            case '1-100': return [...movies.sort((a, b) => a.imdbRating - b.imdbRating)]
            case '100-1': return [...movies.sort((a, b) => b.imdbRating - a.imdbRating)]
            default: return [...movies]

        }
    }



    return (
        <div className='container'>
            <div className='d-flex mb-3 '>
                <h1 style={{ textAlign: 'center', border: 'solid lightgreen', backgroundColor: 'white' }} >My Movie List</h1>
                <form style={{ float: 'right', marginRight: '35px' }}>
                    <input type="text" placeholder='search by name' value={search} onChange={handleChange} />
                    <select value={orderBy} onChange={handleSelectChange} >
                        <option value="">orderBy</option>
                        <option value="a-z">a-z</option>
                        <option value="z-a">z-a</option>
                        <option value="1-100">1-100</option>
                        <option value="100-1">100-1</option>
                    </select>
                </form>
            </div>
            <div className=" row pt-2  justify-content-around " style={{ textAlign: 'center', width: '100%' }}>

                {
                    filterBy.length > 0 ? (
                        filterBy.map((movie) => {
                            return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
                        })
                    ) : (
                        show(movies).map((movie) => {
                            return <MovieCard key={movie.imdbID} {...movie} />
                        })
                    )
                }
            </div>

        </div >
    )
}

export default MoviesList

这是电影卡组件

import React from 'react'
import { useDispatch } from 'react-redux'
import { removeMovie } from '../actions/moviesAction'


const MovieCard = (props) => {
    console.log(props)
    const { Title, Poster, imdbRating, imdbID } = props
    const dispatch = useDispatch()

    return (
        <div className="card mt-2 p-2 bd-highlight border shadow rounded" style={{ width: '16rem' }}>
            <img className="card-img-left pt-2" src={Poster} alt={Title} style={{ width: '200px', height: '200px' }} />
            <div className="card-body">
                <h4 className="card-title">Name : {Title}</h4>
                <h5 className="card-title">Ranking : #{imdbRating}</h5>
                <ion-icon name="trash" style={{ color: 'red' }} onClick={() => {
                    dispatch(removeMovie(imdbID))
                }}>
                </ion-icon>
            </div>
        </div>
)}
export default MovieCard

请帮我解决这个问题。 谢谢

Answer 1

尝试向div渲染MovieCard提供display: flex ，如下所示：

 <div className=" row pt-2  justify-content-around "
     style={{ textAlign: 'center', width: '100%', display: 'flex' }}>
            {
                filterBy.length > 0 ? (
                    filterBy.map((movie) => {
                        return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
                    })
                ) : (
                    show(movies).map((movie) => {
                        return <MovieCard key={movie.imdbID} {...movie} />
                    })
                )
            }
 </div>

Answer 2

你可以在这里使用flex 。

将以下代码添加到您的父 div（包含所有卡片的 div）。

如果您有一个 css 文件，请向该 div 添加一个类并添加以下样式。

display: flex;
flex-wrap: wrap;
justify-content: center;

或者，如果您想使用内联样式，请执行以下操作：

<div className=" row pt-2  justify-content-around " style={{ textAlign: 'center', width: '100%', display: "flex", flexWrap: "wrap", justifyContent: "center"  }}>
{filterBy.length > 0 ? (
         filterBy.map((movie) => {
             return <MovieCard key={movie.imdbID} Poster={movie.Poster} Title={movie.Title} imdbRating={movie.imdbRating} imdbID={movie.imdbID} />
          })
     ) : (
         show(movies).map((movie) => {
             return <MovieCard key={movie.imdbID} {...movie} />
         }
     )
)}
</div>

Answer 3

尝试使用类似于下面代码的网格方法将允许您控制所需的行数和列数以及它们的大小。

**

 <h1>Example { grid-template-rows: 40% 50% 50px;}</h1> <p><strong style="color: red">The shorthand property, grid-template, can replace both </strong>grid-template-rows and grid-template-columns.</p> <hr> <p style="font-family: Courier">When using grid-template, the values before the slash will determine the size of each row. The values after the slash determine the size of each column. </p><hr> <p style="font-family: Courier">In this example there are 3 rows and 3 columns added to the grid.</p><h1>Example {grid-template: 40% 50% 50px/100px 50% 200px;}</h1><br> <p><strong style="color: red">By using the (fr) unit, we can define the size of columns and rows as a fraction of the grid's length and width.</strong><br>Using (fr) makes it easier to prevent grid items from overflowing the boundaries of the grid.</p> <h1>Example {grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;}<br> width: 400px;<br>

**

Answer 4

如果您使用的是 Bootstrap，那么您不需要直接使用flex或grid 。 这是 Bootstrap 实现所需布局的方法：

 <div className="row"> {movies.map(item => ( <div className="col"> // then here yo can put your card for the movie </div> ))} </div>

这是关于它的 Bootstrap 文档