html - 骨架 CSS - 响应式表单

Question

我有一个使用骨架 css 实现的表单。我使用的是三列(即三分之一列)布局，但由于列内容的各自长度，这导致了大量空白。我更喜欢类似于以下的水平布局:

文本框 1 文本框 2 文本框 3

文本框4 文本框5 文本框6

然后在移动设备上折叠起来:

文本框1

文本框2

文本框3

文本框4

文本框5

文本框6

到目前为止，我认为我可以做到这一点的唯一方法是将每个文本框包装在它自己的“三分之一”列中。有更简洁的方法吗？

谢谢

Answer 1

为您的文本框(或 input[type="text"])和 CSS 设置类:

对于桌面:

.yourclass {
    width: 33%;
    float: left;
 }

对于手机:

@media only screen and (max-device-width: 480px) {
    .yourclass {
         width: 100%;
         float: left;
    }
}

这个:https://mislav.net/2010/04/targeted-css/可能会有帮助。