我正在制作一個網頁,在其中使用 API 獲取電影,并嘗試在同一行中使用 materilize css 卡列出電影海報,但它僅作為一列列在彼此之上。應用程序.jsclass 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 組件在彼此之上列出了電影組件,我正在嘗試找到以響應方式水平列出它們的方法。
1 回答

交互式愛情
TA貢獻1712條經驗 獲得超3個贊
請記住始終使用正確的網格結構,即:
.容器 > .行 > .列
所有列必須排成一排才能做出反應。在 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>
看昨天的這個回答:
Materialise grid s12 無法在移動視圖或 Chrome 開發者工具上運行
使用單個 .row div 的 Codepen 來解決您的問題(注意我必須將 className 更改為 class):
https://codepen.io/doughballs/pen/eYNbwOQ
https://materializecss.com/grid.html
- 1 回答
- 0 關注
- 97 瀏覽
添加回答
舉報
0/150
提交
取消