Foundation Block Grid不工作

Question

我有以下React组件，我尝试使用Foundation Block Grid系统将一系列div加载到页面上，以限制每行div的数量。目前由于某些原因，当我从大屏幕切换到中画面时，每行的div数量从6变为4，但当切换到小尺寸屏幕时，div的数量不会改变。

有没有人知道为什么当我切换到小屏幕时，底部没有起作用的小班1班？

谢谢。

const MovieList = ({movies}) => { 
    if (movies.length === 0) { 
    return <p>We Could Not Find Anything</p>; 
    } 
    movies = movies.map((movie) => { 
    let className = "column column-block movie-box"; 
    let image; 
    if (movie.poster_path) { 
     image = <img src={`http://image.tmdb.org/t/p/w185/${movie.poster_path}`} />; 
    } else { 
     image = <img src={`http://www.planetvlog.com/wp-content/themes/betube/assets/images/watchmovies.png`} />; 
    } 

    return(
     <div key={movie.id} className={className}> 
     <p>{movie.title}</p> 
     {image} 
     </div> 
    ); 
    }); 
    return (
    <div className='row small-up-1 medium-up-4 large-up-6'> 
     {movies} 
    </div> 
); 
}; 

Answer 1

您不能将行和列类应用于同一个div。此外，它是class，而不是className。

<div class='row'> 
    <div class='small-up-1 medium-up-4 large-up-6'> 
     {movies} 
    </div> 
</div>