在较小的屏幕上，将按钮从顶部与机器人程序对齐

Question

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

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

这是他们的代码：

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

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

感谢您的任何意见！

Answer 1

我知道如何在基本CSS中做到这一点
将此类(如果需要，请更改名称(添加到表单中

.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 -->
}

当屏幕大小假设为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 -->
}
}