在较小的屏幕上将按钮从顶部对齐到机器人

Question

我正在使我的项目具有响应性，为此我想在屏幕变小时将通常彼此相邻的按钮从顶部对齐到机器人。

目前有这些按钮： https://i.stack.imgur.com/B7a46.png

这是他们的代码：

<form class="mb-5 flex justify-left grid grid-cols-4 gap-x-20">
.
.
. 
</form>

我正在使用 tailwind css 并尝试添加 css 代码，例如 sm:grid sm:grid-rows-4 - 然后为每个按钮添加如下内容：sm:row-start-1 但是在正常的屏幕尺寸上，按钮和按钮下方的内容之间也会产生巨大的 space。

感谢任何意见！

Answer 1

我知道如何做基本的CSS
将此 class（如果需要更改名称）添加到您的表单

.form {
display: flex;
flex-direction: column;  <!-- To make them aligned vertically -->
justify-content: space-evenly;  <!-- To make them spaced evenly -->

}

将这个class（如果需要更改名称）添加到您的按钮

.button {
padding: 10px 20px;  <!-- Change the padding to your liking -->
}

当屏幕尺寸假设为 600px 时，使它们垂直对齐

@media (max-width:600px)  <!-- To make them aligned vertically till the width of the screen is 600px -->
 {
.form {
display: flex;
flex-direction: column;  <!-- To make them aligned vertically -->
justify-content: space-evenly;  <!-- To make them spaced evenly -->
}
.button {
padding: 10px 20px;  <!-- Change the padding to your liking -->
}
}