如何减少响应布局中的列数

Question

我试图将手机上的列减少到两列，而不是默认显示的列。这里有几个这样的问题，我试着使用他们所说的修复程序，但没有一个对我有效。我确实使用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类只是为了说明这个问题。如果你调整窗口的大小，你会看到所有的框都在一列中。有人能解释一下我是如何让它停留在两列的吗？

Answer 1

它很简单，您可以使用媒体查询并从左到右减少填充。例如：

@media screen and (max-width:500px){
.wrapper {
padding:30px 10px;
} 
.box {padding:0 10px;}
} 

我希望它能帮助你！！如果你想解决其他问题，请告诉我我会解决的。要了解媒体查询，您可以点击此链接https://www.w3schools.com/css/css_rwd_mediaqueries.asp

谢谢！！