无法在同一行列出具体化 css 卡答案

【问题标题】：Unable to List the materialize css cards in the same row无法在同一行列出具体化 css 卡
【发布时间】：2020-07-09 15:23:28
【问题描述】：

我正在制作一个网页，在该网页中我使用 api 获取电影，并且我试图在同一行中使用 materilize css 卡列出电影海报，但它仅作为一列列在彼此的顶部。

app.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;

MovieLists.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>

电影.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 组件将电影组件相互叠加，我正在尝试找到以响应方式水平列出它们的方法。

【问题讨论】：

标签： html css reactjs responsive-design materialize

【解决方案1】：

请记住始终使用正确的网格结构，即：

.container > .row > .col

所有列必须排成一行才能响应。在 movie.js 输出周围添加 .row div 将解决您的问题。

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

从昨天看到这个答案：

Materialize grid s12 not working in mobile view or on Chrome's developer tools

Codepen 使用单个 .row div 来解决您的问题（请注意，我必须将 className 更改为 class）：

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

https://materializecss.com/grid.html

【讨论】：