我必须让网格中的视频在移动设备(移动响应)中观看时一个接一个水平显示,但它们在桌面 View 中应保持垂直对齐。
我试过自动给行和列赋值
return (
<div>
<h1 className="text">trending in youtube</h1>
<div className="grid-container">
<div className="one">
<YouTube
videoId="y6fThXQPT6I"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="two">
<YouTube
videoId="bo_efYhYU2A"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="three">
<YouTube
videoId="3AtDnEC4zak"
opts={opts}
onReady={this._onReady}
/>
</div>
</div>
</div>
);
}
CSS文件
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 5px;
grid-auto-rows: minmax(100px, auto);
}
.text {
margin-top: 50px;
margin-left: 40%;
}
.one {
grid-column: auto;
grid-row: 1;
}
.two {
grid-column:auto;
grid-row: 1;
}
.three {
grid-column: auto;
grid-row: 1;
}
最佳答案
当您使用 bootstrap-4
标记您的帖子时,我假设您使用它。
Bootstrap 有你需要的一切,看看网格系统:https://getbootstrap.com/docs/4.3/layout/grid/
在您的情况下,您可以像这样使用它:
return (
<div className="container">
<h1 className="text">trending in youtube</h1>
<div className="row justify-content-center">
<div className="col-xs-12 col-md-4">
<YouTube
videoId="y6fThXQPT6I"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="col-xs-12 col-md-4">
<YouTube
videoId="bo_efYhYU2A"
opts={opts}
onReady={this._onReady}
/>
</div>
<div className="col-xs-12 col-md-4">
<YouTube
videoId="3AtDnEC4zak"
opts={opts}
onReady={this._onReady}
/>
</div>
</div>
</div>
);
不再需要 CSS 😉
关于css - 如何使网格移动响应响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57451756/