Foundation Block Grid klein funktioniert nicht

Question

Ich habe die folgende React-Komponente, in der ich versuche, eine Reihe von Divs auf die Seite mit dem Foundation Block Grid-System zu laden, um die Anzahl der Divs pro Zeile zu begrenzen. Derzeit ändert sich aus irgendeinem Grund die Anzahl der divs pro Zeile von 6 auf 4, wenn ich von einem großen Bildschirm auf einen mittleren umschalte, aber die Anzahl der divs ändert sich nicht, wenn ich auf einen kleinen Bildschirm umschalte.

Weiß jemand, warum die Small-Up 1-Klasse, dass die Unterseite nicht wirksam wird, wenn ich auf einen kleinen Bildschirm wechseln?

Vielen Dank.

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

Sie können Zeilen- und Spaltenklassen nicht auf dasselbe div anwenden. Außerdem ist es class, nicht className.

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