Фундамент Блок Сетка маленькая не работает

Question

У меня есть следующий компонент React, в котором я пытаюсь загрузить серию divs на страницу с использованием системы Foundation Block Grid, чтобы ограничить количество разделов на строку. В настоящее время по какой-то причине количество разделов на строку меняется с 6 на 4, когда я переключаюсь с большого экрана на средний экран, но количество divs не меняется при переключении на экран небольшого размера.

Кто-нибудь знает, почему маленький класс 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>