时间戳

首页 > 解决方案 > 如何减少响应式布局中的列数？

css - 如何减少响应式布局中的列数？

问题描述

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

标签： cssflexboxmultiple-columns

解决方案

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

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

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

谢谢 ！！

推荐阅读