代码之家 › 专栏 › 技术社区 › user3052443

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

multiple-columns flexbox css

user3052443 · 技术社区 · 6 年前

我正在尝试将电话上的列减少到两列,而不是默认显示的列。这里有几个这样的问题,我试着用他们说的方法来解决,但没有一个对我有效。我用的是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 回复 | 直到 6 年前

-1

Abhijeet 6 年前

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

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

希望对你有帮助!!如果您想修复其他问题,请告诉我我会修复的。若要了解媒体查询,请访问此链接 https://www.w3schools.com/css/css_rwd_mediaqueries.asp

谢谢!啊!

推荐文章

Lee · 当有这么多列时,使用R更改列的特定值

2 年前

D_K · R获取新表

2 年前

Duerna · 将3列一组的多列表格重塑为3列表格[重复]

6 年前

Monica Olvera · 如何按非字母顺序排列pandas数据框中的列,并合并matplotlib表的单元格?

6 年前

TylerNG · 在python中连接/组合类似列

6 年前

Yogita Aher · 如何使用pyspark在下面的代码中传递数组(多列)

6 年前

frank · 如何基于sas中的特定列合并2个表

6 年前

bapors · 比较不同文件的多列,如果存在匹配项,则从文件中追加一列

6 年前

beta · 获取pandas数据帧的唯一列对

6 年前

Satrya Cahya · 如何通过一次保存创建多个foreach?

6 年前