Html 无法在同一行中列出具体化css卡

我正在制作一个网页，其中我使用api获取电影，我试图在同一行中列出使用Materialize 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;

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
这是performSearch（）
}
性能研究（）{
$.ajax({
url:urlString，
成功：（搜索结果）=>{
console.log（“Feteched成功”）；
//console.log（搜索结果）；
const results=searchResults.results
//console.log（结果[0]）
常数movieRows=[]；
结果。forEach（（电影）=>{
//console.log（movie.title）；
console.log（movie.poster_路径）
常数movieRow=
推（movieRow）；
})
this.setState（{rows:movieRows}）
},
错误：（xhr、状态、错误）=>{
console.error（“提取失败”）；
}
})
}
render（）{
返回(
{this.state.rows}
);
}
}
导出默认应用程序；

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>

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

{
props.image==null？
:
}

---

movieLists组件将电影组件列在彼此的顶部，我正试图找到一种方法来水平响应地列出它们。

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

.container>.row>.col

所有的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>

[内容如下]
[内容如下]

看看昨天的答案：

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