Невозможно перечислить материализованные css карты в одной строке - PullRequest
Новая
       32

Невозможно перечислить материализованные css карты в одной строке

0 голосов
/ 29 марта 2020

Я создаю веб-страницу, на которой я получаю фильмы с использованием API и пытаюсь перечислить плакаты mov ie, используя карту materilize css в одном ряду, но они отображаются только друг над другом как столбец.

приложение. js

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state={};


        this.performSearch()

    }

performSearch(){

$.ajax({
url:urlString,
    success:(searchResults) =>{
    console.log("Feteched succesfully");
    //console.log(searchResults);
    const results = searchResults.results
        //console.log(results[0])
    const movieRows = [];

        results.forEach((movie) =>{
           // console.log(movie.title);
            console.log(movie.poster_path)
            const movieRow =   <MovieLists movie={movie}/>
            movieRows.push(movieRow);
        })

        this.setState({rows:movieRows})
    },
    error:(xhr,status,err) =>{
    console.error("Failed to fetch");
    }
})
}


    render() {


        return (
            <div className="App">

                {this.state.rows}

            </div>
        );

    }
}

export default App;

Списки фильмов. js

 <div className="container">
         <div className="row">
             <div className="col s12">

                     <Movie key ={props.movie.id} image={props.movie.poster_path}
                     title={props.movie.title}/>




             </div>
         </div>

     </div>

Mov ie. js

<div className="col s12 m6 l3">

        <div className="card" >
        <div className="card-image waves-effect waves-block waves-dark">
            {
                props.image == null ?
                    <img src ={'https://www.google.com/url?sa=i&url=https%3A%2F%2Fmarket.ionicframework.com%2Fstarters%2Fomdb-search&psig=AOvVaw3Beb0rUUVxt3OsEfwzu07Q&ust=1585542435018000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCJj8kIPsvugCFQAAAAAdAAAAABAD'}
                         alt="card image"
                         style={{width:"100%",height:360}}/>
                         :
                <img src ={`http://image.tmdb.org/t/p/w185${props.image}`}
                alt="card image"
                style={{width:"100%",height:360}}/>
            }
            <div className="card-content">
                <p>

                </p>
            </div>
        </div>

        </div>

</div>

Компонент movieLists перечисляет компонент mov ie друг над другом, я пытаюсь найти способ их горизонтального перечисления.

1 Ответ

1 голос
/ 29 марта 2020

Не забывайте всегда использовать правильную структуру сетки, а именно:

.container> .row> .col

Все столбцы ДОЛЖНЫ сидеть в строках, чтобы вести себя ответственно. Добавление .row div вокруг вывода mov ie. js решит вашу проблему. 

<div class="container">
   <div class="row">
      <div class="col">
         [content goes here]
      </div>
      <div class="col">
         [content goes here]
      </div>
   </div>
</div>

См. Этот ответ вчера:

Материализация сетки s12 не работает в мобильном представлении или в инструментах разработчика Chrome

Codepen с одним .row div для решения вашей проблемы (обратите внимание, мне пришлось изменить класс nameName на класс):

https://codepen.io/doughballs/pen/eYNbwOQ

https://materializecss.com/grid.html

...