html - 在移动设备上将水平形式转换为垂直形式

Question

我在这个页面的底部有一个表格:

当您从 Iphone 4、5、6 等屏幕尺寸查看表单时，按钮完全乱七八糟。 我想让它成为响应式的，这样当您在移动设备上看到该页面时，表单将变为垂直而不是水平。

但是老实说我真的不知道我该怎么做？有人有什么建议吗？

最好的问候

Answer 1

只有一个变化

@media screen (max-width: 480px){
  .signup-wide #signupForm{
    flex-direction: column;
    align-items: center;
  }
}

这是一个最小的完整示例。 在这 Demo ，表单将在 480px

屏幕宽度以下变为垂直

#signupForm{
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 480px){
	#signupForm{
		flex-direction : column;
	}
}

<form action="" id="signupForm">
	<input type="text">
	<input type="text">
	<input type="submit" value="submit">
</form>