Skeleton CSS - 响应式表单

Question

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

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

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

然后在移动设备上折叠如下：

文本框1

文本框2

Textbox3

Textbox4

Textbox5

Textbox6

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

谢谢

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/ 可能会有所帮助。