如何减少响应式布局中的列数？
如何减少响应式布局中的列数？
提问于 2018-07-13 23:15:24
我正在尝试将手机上的列减少到两列，而不是默认显示的一列。这里有几个类似的问题，我试着使用他们所说的修复方法，但没有一个对我有效。我确实使用了flex，而那些不是，所以也许这就是问题所在？
.wrapper {
display:flex;
flex-wrap: wrap;
padding:30px 20px;
margin-bottom:10px;
}
.box {
border:1px solid red;
padding:0 20px;
margin-left:10px;
}<div class="wrapper">
<div class="box">Text 1</div>
<div class="box">Text 2</div>
<div class="box">Text 3</div>
<div class="box">Text 4</div>
<div class="box">Text 5</div>
</div>
这是我的JSFiddle。box类只是为了说明这个问题。如果调整窗口大小，您将看到所有框都在一列中。有人能解释一下我是如何让它保持在两列的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-13 23:23:05
它很简单，你可以使用媒体查询，减少从左到右的填充。例如：
@media screen and (max-width:500px){
.wrapper {
padding:30px 10px;
}
.box {padding:0 10px;}
} 我希望它能帮助你!！如果你想解决其他问题，请让我知道，我会做that.To了解媒体查询，你可以点击这个链接https://www.w3schools.com/css/css_rwd_mediaqueries.asp
谢谢!！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51328237
复制相关文章
相似问题
腾讯云开发者
