移动单列表单布局,桌面双列

Posted

技术标签:

【中文标题】移动单列表单布局,桌面双列【英文标题】:Single column form layout for mobile, double column for desktop 【发布时间】:2018-11-22 11:10:56 【问题描述】:

我有一个具有两列布局的表单。在每一列中,我都有一个标签,标签正下方是输入文本元素。

当我在移动设备上查看时,它是响应式的,但它只是使输入框变小,并且停留在两列上。我想要它做的是切换到单列布局。标签,下面是输入元素,然后是下一个标签,依此类推。

我可以使用媒体 css 设置根据屏幕大小显示两种不同的表单,但是我有两个相同表单的副本。我试图避免维护两个单独的副本。

有没有办法做到这一点?

【问题讨论】:

【参考方案1】:

添加页面的一些示例 html,很可能您只需要添加额外的 div 类,例如

<div class="col-md-2 col-sm-12"> </div>

在中型设备上将 div 显示为 2 列,在小型显示设备上显示为 12 列。

检查链接尝试向下调整窗口大小,您会看到 div 跳转到填充页面。

https://codepen.io/anon/pen/aKwoVa

【讨论】:

这使我朝着正确的方向前进。我需要做 col-xs-12 并迫使下一个字段到下一行。谢谢!

以上是关于移动单列表单布局,桌面双列的主要内容,如果未能解决你的问题,请参考以下文章

iPhone 方向布局从单列到双列

将桌面布局转换为单列移动布局

将登录表单放在页面右侧

网站开发练习

在移动设备上将 Bootstrap 布局从内联表单更改为网格

获取单列集合,双列集合,数组的Stream流对象以及简单操作