基础块网格小不工作

Question

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

有人知道为什么我切换到小屏时底部不生效的small-up 1 class吗？

谢谢。

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>