无法列出同一行中的物化 css 卡

Question

我正在制作一个网页，在其中使用 API 获取电影，并尝试在同一行中使用 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;

movieLists 组件在彼此之上列出了电影组件，我正在尝试找到以响应方式水平列出它们的方法。

Answer 1

请记住始终使用正确的网格结构，即：.容器 > .行 > .列所有列必须排成一排才能做出反应。在 movie.js 输出周围添加 .row div 将解决您的问题。<div class="container">&nbsp; &nbsp;<div class="row">&nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[content goes here]&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[content goes here]&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;</div></div>看昨天的这个回答：Materialise grid s12 无法在移动视图或 Chrome 开发者工具上运行使用单个 .row div 的 Codepen 来解决您的问题（注意我必须将 className 更改为 class）：https://codepen.io/doughballs/pen/eYNbwOQhttps://materializecss.com/grid.html