我有以下 React 组件,我在其中尝试使用 Foundation Block Grid 系统将一系列 div 加载到页面上,以限制每行的 div 数量。目前由于某种原因,当我从大屏幕切换到中等屏幕时,每行的 div 数量确实从 6 变为 4,但是当我切换到小尺寸屏幕时,div 的数量没有改变。
有谁知道为什么切换到小屏后底部的small-up 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>
);
};
最佳答案
您不能将行类和列类应用于同一个 div。此外,它是 class
,而不是 className
。
<div class='row'>
<div class='small-up-1 medium-up-4 large-up-6'>
{movies}
</div>
</div>
关于css - Foundation Block Grid 小不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41797819/