代码之家 › 专栏 › 技术社区 › 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

谢谢!啊!

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前